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

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 状态将不会像您使用时那样工作一个鼠标。用户必须知道按下“关于我们”链接文本的一侧才能看到下拉菜单，否则他们将直接被带到“关于我们”页面而看不到 :hover 状态.可能需要以树结构显示所有元素或使用 JavaScript 为子菜单添加额外的功能。

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