用html和css写一个二级菜单
时间: 2023-05-12 14:07:01 浏览: 117
好的,以下是一个简单的二级菜单的 HTML 和 CSS 代码:
HTML 代码:
```
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
```
CSS 代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
padding: 5px 10px;
color: #333;
}
nav ul ul li a:hover {
background-color: #f5f5f5;
}
```
这个二级菜单使用了 HTML 的无序列表和 CSS 的绝对定位来实现。当鼠标悬停在菜单项上时,子菜单会显示出来。
阅读全文