html弄一个二级菜单
时间: 2024-06-22 20:00:45 浏览: 29
创建HTML的二级菜单通常涉及到使用`<ul>`和`<li>`标签来组织菜单项,以及可能的嵌套结构。以下是一个简单的例子来展示如何实现二级菜单:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #f1f1f1;
}
li {
display: inline-block;
}
ul ul {
display: none;
position: absolute;
background-color: #f9f9f9;
}
li:hover > ul {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">一级菜单 - 主项2</a>
<ul>
<li><a href="#">二级菜单 - 子项1</a></li>
<li><a href="#">二级菜单 - 子项2</a></li>
<li><a href="#">二级菜单 - 子项3</a></li>
</ul>
</li>
<!-- 添加其他一级菜单项 -->
</ul>
</body>
</html>
```
在这个例子中:
- `ul.menu` 是一个无序列表,用于包含菜单项。
- `li` 列表项表示一级菜单项。
- 当鼠标悬停在一级菜单项上时,对应的 `ul`(`li:hover > ul`)会显示为下拉菜单。
- 如果需要添加更多二级菜单项,只需复制一级菜单项,并在相应的`li`内创建一个新的`ul`。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)