下面的代码将描述这种情况:
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 ) 是 block 状元素，彼此堆叠在一起，同样的事情发生在第三层。
现在第三层在第二层的右边，所以，如果我使用 position:absolute属性然后top:0例如，每个子三级(假设我们有一个以上的三级菜单项)将隐藏下一个子级 3，就像这张照片中发生的那样:
基本上我想避免这个问题，所以如果你将鼠标悬停在 list-item-sub-2 上我只想打开类为 drop-down.level 的 div当我将鼠标悬停在下一个元素列表上时 list-item-sub-3我想用 drop-down.level.grey 类打开 div在与 list-item-sub-3 匹配的不同位置(稍微回到之前的列表)。
我只想使用 css 但就像我说的，如果我使用 position:absolute每个元素的属性，其值类似于 top:10px或 top:2%如果我使用 position:relative，每个元素都会相互叠加相反，每个元素都将嵌套在它们上层的父元素上。
有什么建议吗？
最佳答案
首先， <ul> s may only contain <li> , <script> , and <template> elements .子菜单 <ul> s 应该是其关联的 child <li>秒。有了这个改变，我们可以定位 <ul>绝对在他们的内部 <li> s 基于它们在菜单层次结构中的深度并删除所有类:
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 ？
关于html - 使用位置 :absolute within a three levels menu to display the last two levels on the right of each other avoiding stack them on each other，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52656420/