如何設計嵌套的CSS使用Mvc，數據庫

Question

我正在使用一個數據庫中的表格，其中有列： menuid（主鍵），MenuName，displayMenuorder，ParentMenuId（外鍵）引用menuid（主鍵） 。

我有一些數據庫中的數據和我想呈現一個像這樣的菜單：。 https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel

我嘗試了很多東西，但仍然無法想出，這是我迄今爲止。請幫忙。提前致謝。

SQL數據庫

Menuid Menuname displayMenuorder parentmenuid 
1 Root    1  NULL 
2 HOME    1  1 
3 ELECTRONICS   2  1 
4 APPLIANCES   3  1 
5 BABY & KIDS   4  1 
6 HOME & FURNITURE 5  1 
7 Samsung    1  3 
8 Apple    1  3 
9 Kitchen Appliances 1  4 
10 Microwave   1  9 

控制器

public ActionResult MainMenu() 
     { 
      var mainmenu = db.Menus.SingleOrDefault(x => x.ParentMenuId == null);    
      return View(mainmenu); 
     } 

     [ChildActionOnly] 
     public ActionResult MainMenuid(int id) 
     { 
      var items = db.Menus.Find(id); 
      return PartialView(items); 
     } 

瀏覽的MainMenu

@model Arrivaler.Models.Menu 

@{ 
    Layout = null; 
} 

<div class="container"> 
    <nav class="navbar navbar-inverse"> 
     <div class="navbar-header"> 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> 

       <span class="sr-only">Toggle navigation</span> 

       <span class="icon-bar"></span> 

       <span class="icon-bar"></span> 

       <span class="icon-bar"></span> 

      </button> <a class="navbar-brand" href="#">My Store</a> 
     </div> 
     <ul class="nav navbar-nav"> 
      @foreach (var menuItem in Model.ChildItems.OrderBy(x => x.DisplayMenuOrder)) 
      { 
       @Html.Action("MainMenuid", new { id = menuItem.MenuId }) 
      } 
     </ul> 
     </nav> 
</div> 

查看MainMenuId

@model Arrivaler.Models.Menu 

<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/test.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/navMenu.js"></script> 

<li class="dropdown mega-dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">@Model.MenuName<span class="caret"></span></a> 
    <ul class="dropdown-menu mega-dropdown-menu"> 
     <li class="col-sm-3"> 
      <ul> 
       <li class="dropdown-header">@Model.MenuName</li> 
       <li> 
        <a href="@Model.MenuId"> 
         @if (Model.ChildItems.Any()) 
         { 
          foreach (var menuItem in Model.ChildItems.OrderBy(x => x.DisplayMenuOrder)) 
          { 
           @Html.Action("MainMenuid", new { id = menuItem.MenuId }) 
          } 
         } 
        </a> 
       </li> 
      </ul>  
     </li> 
    </ul> 
</li> 

CSS

.mega-dropdown { 
    position: static !important; 
} 
.mega-dropdown-menu { 
    padding: 20px 0px; 
    width: 100%; 
    box-shadow: none; 
    -webkit-box-shadow: none;  
} 
.mega-dropdown-menu > li > ul { 
    padding: 0; 
    margin: 0; 
} 
.mega-dropdown-menu > li > ul > li { 
    list-style: none; 
} 
.mega-dropdown-menu > li > ul > li > a { 
    display: block; 
    color: #222; 
    font-size:large; 
    padding: 0px 5px; 
} 
.mega-dropdown-menu > li ul > li > a:hover, 
.mega-dropdown-menu > li ul > li > a:focus { 
    text-decoration: none; 
} 
.mega-dropdown-menu .dropdown-header { 
    font-size: 18px; 
    color: #ff3546; 
    padding: 5px 60px 5px 5px; 
    line-height: 30px; 
} 

.carousel-control { 
    width: 30px; 
    height: 30px; 
    top: -35px; 

} 
.left.carousel-control { 
    right: 30px; 
    left: inherit; 
} 
.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right { 
    font-size: 12px; 
    background-color: #fff; 
    line-height: 30px; 
    text-shadow: none; 
    color: #333; 
    border: 1px solid #ddd; 
} 

JAVASCRIPT

$(document).ready(function() { 
    $(".dropdown").hover(
     function() { 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100"); 
      $(this).toggleClass('open'); 
     }, 
     function() { 
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100"); 
      $(this).toggleClass('open'); 
     } 
    ); 
}); 

我輸出是這樣的。

output image

Answer 1

您可以檢查了這一點。

CSS

#primary_nav_wrap ul 
{ 
    list-style:none; 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul a 
{ 
    display:block; 
    color:#333; 
    text-decoration:none; 
    font-weight:700; 
    font-size:12px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
} 

#primary_nav_wrap ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul li.menu-li 
{ 
    /*background:#ddd;*/ 
} 

#primary_nav_wrap ul li:hover 
{ 
    background:#f6f6f6; 
    z-index : 10; 
} 

#primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 

#primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:200px 
} 

#primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

#primary_nav_wrap ul ul ul 
{ 
    top:0; 
    left:100% 
} 

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block;  
} 

MAINMENU動作視圖

<nav id="primary_nav_wrap"> 
<ul> 
    /*your loop*/ 
</ul> 
</nav> 

MAINMENUID動作視圖

<li> 
<a></a> 
<ul> 
</ul> 
</li>