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

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 上，所以请原谅所有剃刀位）

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 的响应式子菜单，但它也不使用包含子项的顶级菜单项的链接。