css - 在 MVC 中使用 Razor 的带有下拉子菜单项的菜单项无法正常显示

Question

问题陈述:

在 MVC 中使用 Razor(CSHTML) 创建带有子菜单项的菜单项。我已经使用 ul 和 li 正确编写了 html 代码。一切顺利。一些格式问题。

但不是水平菜单项，而是垂直菜单项，子菜单项是水平菜单项。我想要水平菜单项，像子菜单项一样具有垂直下拉菜单。

我在 CSS 中做错了什么？？

Razor 中的 CSHTML:

<nav>
       <ul id="menu" >
            <li class="submenu">@Html.ActionLink("Admin", "Index", "Home")
                 <ul>
                   <li>@Html.ActionLink("Country", "Index", "Home")</li>
                   <li>@Html.ActionLink("State", "Index", "Home")</li>
                   <li>@Html.ActionLink("City", "Index", "Home")</li>
                   <li>@Html.ActionLink("Controls", "Index", "Home")</li>
                 </ul>
           </li>
           <li class="submenu">@Html.ActionLink("Masters", "Index", "Home")
               <ul>
                  <li>@Html.ActionLink("Accessories", "Index", "Home")</li>
                  <li>@Html.ActionLink("Asset Type", "Index", "Home")</li>
                  <li>@Html.ActionLink("Asset", "Index", "Home")</li>
                  <li>@Html.ActionLink("Business Unit", "Index", "Home")</li>
               </ul>
           </li>
           <li class="submenu">@Html.ActionLink("Acquire", "Index", "Home")
             <ul>
                <li>@Html.ActionLink("Acquire Assets", "Index", "Home")</li>
                <li>@Html.ActionLink("Asset Status", "Index", "Home")</li>
                <li>@Html.ActionLink("Audit", "Index", "Home")</li>
             </ul>
           </li>
           <li class="submenu">@Html.ActionLink("Management", "Index", "Home")
              <ul>
                <li>@Html.ActionLink("Deploy", "Index", "Home")</li>
                <li>@Html.ActionLink("Return", "Index", "Home")</li>
              </ul>
           </li>
           <li class="submenu">@Html.ActionLink("Maintenance", "Index", "Home")
                 <ul>
                       <li>@Html.ActionLink("Upgrade", "Index", "Home")</li>
                       <li>@Html.ActionLink("Reports", "Index", "Home")</li>
                 </ul>
           </li>
      </ul>               
 </nav>

CSS:

 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: 5px;
            margin: 0;
        }

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

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

    ul#menu, ul.menu ul
    {
        display: block;
        margin: 0;
        padding: 0;
    }

        ul#menu li
        {
            display: inline;
            list-style: none;
            margin: 0;
            padding-right: 1.5em;
        }

            ul#menu li ul
            {
                visibility: hidden;
            }

            ul#menu li.submenu:hover ul
            {
                visibility: visible;
            }
     nav
        {
            margin-bottom: 5px;
        }
    ul#menu
    {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li
        {
            margin: 0;
            padding: 0;
        }

Answer 1

我通过使用解决了在对齐菜单和子菜单项时遇到的问题绝对定位。

ul#menu li ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;

}