Question

我希望使用Razor在我的MVC应用程序中有一个子菜单。

我想要一个子菜单调用Admin，在它下面我将有Category和Product。

_Layout.cshtml

 <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("Store", "Store", "Home")</li>
                        <li>@Html.ActionLink("Admin", "Admin", "Home")</li>
                        <ul>                                <== I will like to have a sub-menu

                            <li>@Html.ActionLink("Category", "Index", "Category")</li>
                            <li>@Html.ActionLink("Product", "Index", "Product")</li>
                        </ul>
                        <li>@{Html.RenderAction("CartSummary", "Cart");}</li>


                     </ul>
 </nav>

我无法找到执行此操作的最简单方法。

谢谢

我已经尝试过了，但它并没有像预期的那样出现。

                            <li>
                           <a href="#">Admin</a>
                            <ul class="nested">
                                <li>@Html.ActionLink("Category", "Index", "Category")</li>
                                <li>@Html.ActionLink("Product", "Index", "Product")</li>
                            </ul>
                        </li>

使用以下css

     #nav ul{
        display : none;
     }
     #nav li:hover > ul{
          display : block;
     }

这是这样的：

    Home   Store     Admin
           Category  Product
                     Cart(0)

我想要这样

   Home  Store   Admin   Cart(0)
             category   Product     <== only if I clicked on admin

这是菜单的完整css文件

 /* menu

----------------------------------------------- ----------- * / ul＃menu { font-size：1.3em; font-weight：600; 保证金：0 0 5px; 填充：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;
        display : block;
    }

nav ul{
display : none;
}
nav li:hover > ul{
   display : block;
}

Answer 1

这是css的方式

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

 ul#menu li {
     float: left;
    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;
        display : block;
    }



 ul#submenu { display: none; }
 ul#submenu li { float: none; display: none; }

 ul#menu li:hover ul#submenu
 {
    display: block;
    position: absolute;
    padding-top: 5px;
 }

 ul#menu li:hover ul#submenu li {
     display : block;

和_Layout.cshtml

                   <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Accueil", "Index", "Home")</li>
                        <li>@Html.ActionLink("Magasin", "Magasin", "Home")</li>
                        <li>  <a href="#">Gestion</a>
                            <ul id="submenu" class="nested">
                                <li>@Html.ActionLink("Catégorie", "Index", "Categorie")</li>
                                <li>@Html.ActionLink("Produit", "Index", "Produit")</li>
                            </ul>
                        </li>
                        <li>@{Html.RenderAction("CartSummary", "Panier");}</li>


                    </ul>
                </nav>

使用@ html.ActionLink的子菜单

1 个答案: