我想在列表项(列表2)中显示列表项(列表1),并且希望第一个列表的<li>
元素内联显示,而每个第一个{ {1}}将在悬停时垂直显示。悬停在第一个主<li>
上,然后第二个主<li>
会显示在第一个主<li>
的末尾的问题,这是意外的:
以下是问题的实时显示: https://codepen.io/alafawzi/pen/PaVYyB
<li>
<li>
答案 0 :(得分:1)
您需要在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>