我想在列出的元素( list 2)中显示列出的元素( list 1)并且我想要 <li>内联显示的第一个列表的元素和 <li>每个第一个里面的元素<li>在悬停时垂直显示。将鼠标悬停在第一个 main <li> 上时出现的问题, 然后是第二个主 <li>将显示在第一个主要的末尾 <li>这不是预期的:
以下是问题的现场展示: https://codepen.io/alafawzi/pen/PaVYyB
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
ul li {
display: inline-block;
padding: 15px;
}
ul li ul li{
margin: 0;
padding: 0;
display: none;
}
ul li:hover ul li{
display: block;
}<body>
<header>
Html5 begins
</header>
<nav>
<ul>
<li><a href="#">div</a>
<ul>
<li>Link1.1</li>
<li>Link1.2</li>
<li>Link1.3</li>
</ul>
</li>
<li><a href="#">head</a>
<ul>
<li>Link2.1</li>
<li>Link2.2</li>
<li>Link2.3</li>
</ul>
</ul>
</nav>
</body>最佳答案
需要在sub ul中添加绝对位置。
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
ul li {
display: inline-block;
padding: 15px;
position: relative;
}
ul li ul{
margin: 0;
padding: 0;
display: none;
position: absolute;
}
ul li:hover ul{
display: block;
}<body>
<header>
Html5 begins
</header>
<nav>
<ul>
<li><a href="#">div</a>
<ul>
<li>Link1.1</li>
<li>Link1.2</li>
<li>Link1.3</li>
</ul>
</li>
<li><a href="#">head</a>
<ul>
<li>Link2.1</li>
<li>Link2.2</li>
<li>Link2.3</li>
</ul>
</ul>
</nav>
</body>关于html - 将级联 ul 显示为内联 block 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51114866/