MVC4 - 导航下拉菜单

Question

当鼠标悬停在[汽车]时，总是将子菜单项显示在彼此旁边[创建拍卖] [显示所有拍卖];我需要将其显示为列表。

请告诉我：

HTML代码:(创建菜单）

  <div id="nav">
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            @foreach (string category in ViewBag.Categories)
                            {
                              <li>@Html.ActionLink(category,"Index","Auction",new{category},null)
                              @if (category== "Automotive")
                              {
                                <ul>
                                    <li>@Html.ActionLink("Create Auction", "Create", "Auction")</li>
                                    <li>@Html.ActionLink("Display all auctions", "Auctions", "Auction")</li>
                                </ul>
                              }
                              </li>
                            }

                    </ul>
                </div> 

CSS代码：
       -------------------------------------------------- --------------        我添加了该代码：

   #menu ul {
       display: none;
      position: absolute;
    min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      z-index: 1;
   }

   #menu li:hover > ul {
        display:block;
   }
   -----------------------------------------------------------
   ul#menu {
        font-size: 1.3em;
        font-weight: 600;
        margin: 0 0 5px;
        padding: 0;
        text-align: right;
   }

   ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
   }

    ul#menu li a {
        background: none;
        color: #999;
        text-decoration: none;
    }

    ul#menu li a:hover {
        color: #333;
        text-decoration: none;
    }

Answer 1

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;

}

说#menu下的所有li都必须以内联方式显示。

您应该为子菜单项添加一些细节，例如

ul#menu li ul li {
   display: block;
}

然后，如果要将子菜单放在相应项目下方，则必须将项目的位置设置为相对，然后将子菜单放置在绝对位置。

所以

ul#menu li {
     position:relative
}

ul#menu li ul {
    position: absolute;
    left: 0;
    top: 100%;
}