在水平呈现的ul li中的其中一个li设置了垂直呈现的下拉菜单,在此下拉菜单中如何设置向右呈现的菜单
时间: 2024-03-03 20:52:57 浏览: 116
要在垂直呈现的下拉菜单中设置一个向右呈现的子菜单,可以在对应的li元素中再添加一个ul元素,并将其设置为绝对定位。然后,将该ul元素的left属性设置为与父级li元素的宽度相等,这样就可以将子菜单向右呈现了。同时,可以对子菜单的样式进行调整,以使其呈现为水平排列的菜单。下面是一个简单的示例代码:
```html
<ul>
<li>菜单项1</li>
<li>菜单项2
<ul class="sub-menu">
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
</li>
<li>菜单项3</li>
</ul>
<style>
.sub-menu {
position: absolute;
left: 100%;
top: 0;
display: none;
}
li:hover .sub-menu {
display: block;
}
</style>
```
在上面的代码中,我们在第二个li元素中添加了一个class为sub-menu的ul元素,并将其设置为绝对定位。然后,通过将其left属性设置为100%来将子菜单向右呈现。最后,我们使用CSS的:hover伪类来在鼠标悬停在父级li元素上时显示子菜单。
阅读全文