Question

作为使我的菜单响应的第一步，我想在css中添加媒体查询以更改菜单显示的方式，以便每个列表项垂直显示在上一项的下方，并具有它自己的子菜单显示下一个列表项之前显示在其下方的项目。希望有道理。以下是使菜单在网站桌面版本中运行的HTML和CSS：

HTML

<nav>   
<img id="logo" src="@logoUrl">

<ul>

   <li class="@(CurrentPage.Url == "/" ? "current" : null)"><a href="/">Home</a></li>

    @foreach (var item in menuItems)
    {
        <li class="@(CurrentPage.Id == item.Id ? "current" : null)">
            <a href="@item.Url">@item.Name</a>

        @if (item.Children.Where("Visible").Any())
        { 

             var subMenuItems = item.Children.Where("Visible");

          <ul>
                @foreach (var sub in subMenuItems)
                {
                   <li><a href="@sub.Url">@sub.Name</a></li> 
                } 
         </ul>

         }

         </li>
    }
</ul>
<br class="clear">
</nav>

（这是在Umbraco，所以原谅所有Razor位）

CSS

 #logo {
    float: left;
    margin-right: 25px;
  }

nav {
    width: 100%;
    height: auto;
    background-color: #354a49;
}

nav > ul > li {
    display: block;
    position: relative;
    width: auto;
    height: 50px;
    float: left;
    font-size: 1.1em;
    margin: 0px 20px 0px 20px;
    padding: 15px 8px 13px 8px;
    text-align: center;
}

nav ul li a {
    color: #fefce9;
    margin-left: auto;
    margin-right: auto;
}

nav ul li a:hover {
    font-style: italic;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    width: 200px;
}

nav ul li:hover {
    border-bottom: 2px solid #fefce9;
    background-color: #a1b0af;
}

nav ul li:hover > ul {
    display: block;
    margin-top: 2px;
}

nav ul li ul li {
    display: block;
    float: none;
    padding: 20px 3px;
    background-color: #a1b0af;
    border-bottom: 2px solid #fefce9;
}

nav ul li ul li a {
    color: #fefce9;
}

nav li.current {
    background-color: #a1b0af;
    border-bottom: 2px solid #fefce9;
}

nav li.current > a {
    color: #fefce9;
    font-style: italic;
}

这是我目前媒体查询中的CSS：

#logo {
    margin-right: -50px;
}

nav > ul > li {
    float: none;
    margin: 0px;
}

nav ul ul {
    width: 100%;
}

nav li.current {
    background-color: inherit;
}

显示主菜单项一个接一个OK，但是当我尝试更改东西以便子菜单项出现在菜单项之间时，我最终会出现在菜单项顶部出现的子菜单项其他

修改

这里是按要求呈现的HTML：

</nav>
  <img id="logo" src="/media/1042/wshalogo.png">

    <ul>

       <li class="current"><a href="/">Home</a></li>

            <li>
                <a href="/about-us/">About us</a>

              <ul>
                       <li><a href="/about-us/our-people/">Our People</a></li> 
                       <li><a href="/about-us/who-we-were-and-are/">Who we were and are</a></li> 
                       <li><a href="/about-us/our-houses/">Our Houses</a></li> 
                       <li><a href="/about-us/annual-reports/">Annual Reports</a></li> 
             </ul>

             </li>
            <li>
                <a href="/being-a-tenant/">Being a Tenant</a>

              <ul>
                       <li><a href="/being-a-tenant/asbestos/">Asbestos</a></li> 
                       <li><a href="/being-a-tenant/being-safe-secure/">Being Safe &amp; Secure</a></li> 
             </ul>

             </li>
            <li>
                <a href="/news/">News</a>

              <ul>
                       <li><a href="/news/community-garden/">Community Garden</a></li> 
                       <li><a href="/news/football-team/">Football Team</a></li> 
                       <li><a href="/news/health-centre/">Health Centre</a></li> 
             </ul>

             </li>
    </ul>
    <br class="clear">
</nav>

Answer 1

您的第二级ul为position: absolute;，这意味着它已从正常的文档流中取出，并且不会占用与其他任何元素相关的空间。尝试将absolute更改为relative。这应该使项目在菜单中正确定位。

nav ul ul {
    display: none;
    position: absolute; /* <--- Try changing this to relative. */
    top: 100%;
    left: 0;
    z-index: 99;
    width: 200px;
}

此外，顶级li的固定高度不会让元素超过50px。请尝试将其设置为min-height：

nav > ul > li {
    display: block;
    position: relative;
    width: auto;
    height: 50px; /* <-- min-height: 50px */
    float: left;
    font-size: 1.1em;
    margin: 0px 20px 0px 20px;
    padding: 15px 8px 13px 8px;
    text-align: center;
}

这有效in this fiddle但是当子菜单悬停然后没有徘徊时，导致尴尬的跳跃。

另外，请考虑您的使用案例 - 如果您这样做是为了支持平板电脑/移动设备，那么:hover州的工作方式就不会像您在＃＆＃t}时那样＃＆＃t} 39;重新使用鼠标。用户必须知道按下＆＃34;关于我们＆＃34;链接文字以查看下拉列表，否则他们将被直接带到＆＃34;关于我们＆＃34;页面没有看到:hover状态。可能需要显示树结构中的所有项目，或使用JavaScript为子菜单添加其他功能。

Here's a decent solution到没有JavaScript的响应式子菜单，但它也没有使用包含子项的顶级菜单项的链接。

使菜单项和子菜单项垂直显示而不会相互覆盖

1 个答案: