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）则是相互堆叠的受阻元素，并且在第三级中发生相同的事情。 / p>

现在，第三级位于第二级的右侧，因此，例如，如果我使用position:absolute属性，然后使用top:0，则每个子第三级（假设我们有更多而不是第三级菜单项）将隐藏下一个sublevel-3，就像在此图片中一样：

基本上，我想避免这个问题，因此，如果您将鼠标悬停在list-item-sub-2上，那么我只想打开类为drop-down.level的div，而当我将鼠标悬停在下一个元素列表{{1}上时}我想在与list-item-sub-3匹配的其他位置打开类为drop-down.level.grey的div（略微移至上一个列表）。

我只想使用CSS，但是就像我说的那样，如果我在每个元素上使用list-item-sub-3或position:absolute这样的值的top:10px属性，则每个元素都会将自己放在每个元素上另外，如果我改用top:2%，则每个元素都将嵌套在其上级父级上。

有什么建议吗？

Answer 1

首先，<ul>s may only contain <li>, <script>, and <template> elements。子菜单<ul>应该是与其关联的<li>的子菜单。完成更改后，我们可以根据菜单层次结构中的深度将<ul>完全放置在<li>中，并放下所有类：

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伪类不能胜任这项任务（讨厌的GIF动画会产生这种错误）：

您是否考虑过mega menu？

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

1 个答案: