html多级菜单
时间: 2023-07-05 18:24:27 浏览: 53
您可以使用HTML和CSS来创建多级菜单。以下是一个示例:
HTML代码:
```
<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="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a>
<ul>
<li><a href="#">子子菜单1</a></li>
<li><a href="#">子子菜单2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
```
CSS代码:
```
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
position: relative;
}
ul li > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
}
ul li:hover > ul {
display: block;
}
ul li > ul li {
position: relative;
}
ul li > ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
}
ul li > ul li:hover > ul {
display: block;
}
```
此代码将创建一个包含两个父菜单项的菜单。每个父菜单项都有多个子菜单项,其中一个子菜单项本身也包含多个子菜单项。当用户将鼠标悬停在父菜单项上时,子菜单项将显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)