подменю с использованием @ html.ActionLink

Я хочу иметь подменю с моим приложением MVC с помощью Razor.

Я хотел бы иметь подменю Call Admin, и под ним у меня будет категория и продукт.

_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; font-weight: 600; margin: 0 0 5px; margin: 0 0 5px; padding: 0; заполнение: 0; text-align: right; 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;
}