【发布时间】：2020-10-05 16:57:04
【问题描述】：
我有一个最大深度为 3 的嵌套导航列表，例如：
<!-- Depth 1 -->
<ul>
<li>...</li>
<li>
<li>...</li>
<!-- Depth 2 -->
<ul>
<li>
<li>...</li>
<!-- Depth 3 -->
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
<li>...</li>
</ul>
我希望每个嵌套级别在悬停时显示在父列表的右侧，但与祖父列表的顶部齐平。
到目前为止，我有这个：
*,
*:before,
*:after {
box-sizing: border-box;
}
nav {
background: #eee;
padding: 10px;
}
nav ul {
display: block;
list-style: none;
padding: 0;
margin: 0;
border-right: 1px solid #333;
width: 33.333vw;
}
nav ul>li {
position: relative;
display: block;
margin: 0;
padding: 0 10px;
}
nav ul>li.has-children>a:after {
content: '»';
float: right;
}
nav ul>li>a {
display: block;
padding: 8px 15px;
transition: background-color 0.4s;
}
nav ul>li>ul.sub-menu {
display: none;
position: absolute;
top: 0;
left: 100%;
}
nav ul>li:hover>a {
background-color: rgba(0, 0, 0, 0.04);
}
nav ul>li:hover>ul.sub-menu {
display: block;
}<nav>
<ul>
<li class="has-children">
<a href="#">Item 1</a>
<ul class="sub-menu">
<li class="has-children">
<a href="#">Sub 1.1</a>
<ul class="sub-menu">
<li><a href="#">Sub 1.1.1</a></li>
<li><a href="#">Sub 1.1.2</a></li>
<li><a href="#">Sub 1.1.3</a></li>
</ul>
</li>
<li><a href="#">Sub 1.2</a></li>
<li class="has-children">
<a href="#">Sub 1.3</a>
<ul class="sub-menu">
<li><a href="#">Sub 1.3.1</a></li>
<li><a href="#">Sub 1.3.2</a></li>
<li><a href="#">Sub 1.3.3</a></li>
</ul>
</li>
<li><a href="#">Sub 1.4</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Item 2</a>
<ul class="sub-menu">
<li class="has-children">
<a href="#">Sub 2.1</a>
<ul class="sub-menu">
<li><a href="#">Sub 2.1.1</a></li>
<li><a href="#">Sub 2.1.2</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Sub 2.2</a>
<ul class="sub-menu">
<li><a href="#">Sub 2.3.1</a></li>
<li><a href="#">Sub 2.3.2</a></li>
<li><a href="#">Sub 2.3.3</a></li>
<li><a href="#">Sub 2.3.4</a></li>
</ul>
</li>
<li><a href="#">Sub 2.3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li class="has-children">
<a href="#">Item 5</a>
<ul class="sub-menu">
<li class="has-children">
<a href="#">Sub 5.1</a>
<ul class="sub-menu">
<li><a href="#">Sub 5.1.1</a></li>
<li><a href="#">Sub 5.1.2</a></li>
<li><a href="#">Sub 5.1.3</a></li>
</ul>
</li>
<li><a href="#">Sub 5.2</a></li>
<li class="has-children">
<a href="#">Sub 5.3</a>
<ul class="sub-menu">
<li><a href="#">Sub 5.3.1</a></li>
<li><a href="#">Sub 5.3.2</a></li>
<li><a href="#">Sub 5.3.3</a></li>
</ul>
</li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
</ul>
</nav>(https://jsfiddle.net/thelevicole/q4y8fxu0/)
但这会将子列表定位到在上面产生空白的父元素的顶部。
有没有办法用 CSS 实现这一点，还是我必须用 javascript 修改 DOM？
【问题讨论】：
-
请不要将您的代码发布到第三方网站，因为这些链接会随着时间的推移而失效，从而使您的问题毫无意义。始终将您的代码与您的问题一起包含，如果您在编辑问题时按下堆栈 sn-p 按钮
<>，您可以将代码插入可执行环境，就像 Fiddle 或 Pen。 -
@ScottMarcus 感谢您的编辑，但是，我已将问题退回到以前的状态，因为 SO sn-p 编辑器不允许进行 SASS 预处理，这破坏了我的示例给了。
-
@ScottMarcus 你会很高兴知道我已经添加了内联代码。我希望这能取悦众神！
-
如果您的问题不是关于 Sass 的工作，您可以（并且应该）切换到已编译的 CSS 并将其发布在 Stack Snippet 中。您不应该让我们不得不去其他地方运行您的代码。
标签： javascript html jquery css navigation