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;

}

Answer 2

以下代码适用于多级菜单。 CSS： .dropdown，子菜单 { 位置：相对; }

    .dropdown-submenu .dropdown-menu
    {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
</style>

脚本：

 <script>
    $(document).ready(function () {
        $('.dropdown-submenu a.submenu').on("click", function (e) {
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
    });
</script>

HTML：

    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                </span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse navbar-left">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
                    class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a>q</a></li>
                        <li><a>qwq</a></li>
                        <li><a>eeq</a></li>
                        <li class="dropdown-submenu"><a href="#" class="submenu" data-toggle="dropdown"><span
                            class="glyphicon glyphicon-cog"></span>Sub Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a>g</a></li>
                                <li><a>qq</a></li>
                                <li><a>wqw</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse navbar-right">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

使用MVC中的剃刀下拉子菜单项的菜单项不正确

2 个答案: