html + css二级菜单
时间: 2023-09-06 09:09:18 浏览: 47
以下是一个简单的 HTML + CSS 二级菜单的示例代码:
HTML:
```html
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li>
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
```
CSS:
```css
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
display: block;
width: 200px;
}
nav ul ul a {
padding: 10px 15px;
color: #333;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
```
在这个例子中,我们使用了无序列表 `<ul>` 和列表项 `<li>` 来组织菜单。当鼠标悬停在菜单项上时,子菜单会展开。子菜单使用绝对定位来放置在主菜单下方,并且使用了 CSS 的 `display` 属性来控制菜单的可见性。这个例子仅包含了一个二级菜单,但你可以添加更多的子菜单来实现更复杂的菜单结构。