在三级菜单中使用 position:absolute 将最后两级显示在彼此的右侧，避免将它们堆叠在一起

Question

下面的代码将描述这种情况：

ul {
  margin: 0 0 1% 5%;
  font-size: 18px;

}
ul li {
  display: inline;
  padding: 10px;
}
.drop-down {
  position: absolute;
  background: dodgerblue;
}
.drop-down .level {
  left: 114px;
  top: 10px;
  position: absolute;
  background: red;
  display: block;
  width: 100%;
}
.drop-down li {
  display: block;
}
ul {
  margin: 0;
  padding: 0;
}
.drop-down .level.grey {
  background: grey;
}

<body>
 <nav>
  <ul>
   <li class="drop">list item 1</li>
   <div class="drop-down">
    <ul>
     <li>list item sub 2</li>
     <div class="drop-down level">
      <ul>
       <li>list item sub-sub 3</li>
       <li>list item sub-sub 3</li>
       <li>list item sub-sub 3</li>
      </ul>
     </div>
     <li>list item sub 3</li>
     <div class="drop-down level grey">
      <ul>
       <li>list item sub-sub 3</li>
       <li>list item sub-sub 3</li>
       <li>list item sub-sub 3</li>
      </ul>
     </div>
     <li>list item sub 4</li>
    </ul>
   </div>
   <li class="drop">list item 2</li>
   <li class="drop">list item 3</li>
   <li class="drop">list item 4</li>
   <li class="drop">list item 5</li>
   <li class="drop">list item 6</li>
   <li class="drop">list item 7</li>
   <li class="drop">list item 8</li>
  </ul>
 </nav>
</body>

我正在构建一个三级菜单，当您将鼠标悬停在每个级别的每个元素上时，它将打开与您悬停的元素对应的下一级。

这就是我或多或少想要达到的目标：

我还没有到达要添加悬停属性的地步，因为我正在处理定位问题。第一层的元素 (li) 具有内联定位，第二层元素 (li) 是块状元素，彼此堆叠在一起，同样的事情发生在第三层。

现在第三层在第二层的右边所以，如果我使用 position:absolute 属性然后 top:0 例如，每个子第三层（假设我们有一个以上的第三级菜单项）将隐藏下一个 sublevel-3 就像它在这张照片中发生的那样：

基本上我想避免这个问题所以如果你悬停在 list-item-sub-2 我想只打开 div 和 class drop-down.level 当我悬停在下一个元素列表 list-item-sub-3 我想打开 div 和 class drop-down.level.grey 在与 list-item-sub-3 匹配的不同位置（稍微向下到上一个列表）。

我只想使用 css 但正如我所说，如果我在每个元素上使用 position:absolute 属性，其值如 top:10px 或 top:2% 每个元素都会相互叠加，如果我使用 position:relative 代替，每个元素都会嵌套在它们上层的父元素上。

有什么建议吗？

Answer 1

首先，<ul>s may only contain <li>, <script>, and <template> elements。子菜单 <ul> 应该是其关联的 <li> 的子菜单。有了这个改变，我们可以根据它们在菜单层次结构中的深度将 <ul>s 绝对定位在它们的 <li>s 中，并删除所有 classes:

nav ul {
  margin: 0 0 1% 5%;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

nav li {
  /* All <ul>s are positioned relative to their parent <li> */
  position: relative;
  /* No bullets */
  list-style: none;
  /* Without word wrapping, menus are as wide as they need to be */
  white-space: nowrap;
  padding: 10px;
}

/* Top-level list's items are inline */
nav>ul>li {
  display: inline;
}

/* Second-level lists are below their parent <li> */
nav>ul>li>ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: dodgerblue;
}

/* Third-level lists and deeper are right of their parent <li> */
nav ul ul ul {
  left: 100%;
  top: 0;
  position: absolute;
  background: red;
}

.grey {
  background: grey;
}

<nav>
  <ul>
    <li>File</li>
    <li>Edit</li>
    <li>
      View
      <ul>
        <li>
          Toolbars
          <ul class="grey">
            <li>Menu Bar</li>
            <li>Bookmarks Toolbar</li>
            <li>Customize...</li>
          </ul>
        </li>
        <li>
          Sidebar
          <ul>
            <li>Bookmarks</li>
            <li>History</li>
            <li>Synced Tabs</li>
          </ul>
        </li>
        <li>Zoom</li>
        <li>Page Style</li>
        <li>Text Encoding</li>
        <li>Full Screen</li>
        <li>Enter Reader View</li>
      </ul>
    </li>
    <li>History</li>
    <li>Bookmarks</li>
    <li>Tools</li>
    <li>Help</li>
  </ul>
</nav>

悬停效果需要 JavaScript，因为 usable flyout menus are challenging 和 CSS 的 :hover 伪 class 达不到任务（因烦人的 GIF 动画而剧透）：

你考虑过mega menu吗？

在三级菜单中使用 position:absolute 将最后两级显示在彼此的右侧，避免将它们堆叠在一起

Use position:absolute within a three levels menu to display the last two levels on the right of each other avoiding stack them on each other

html

css

css-position