只能有一个下拉菜单,实现展示两级内容
时间: 2023-12-10 13:42:33 浏览: 34
可以使用嵌套下拉菜单来实现展示两级内容。具体实现方式如下:
1. 在 HTML 中定义一个带有下拉菜单的列表。
```
<ul>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
</ul>
```
2. 在 CSS 中设置列表项的样式。
```
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position: relative;
}
ul li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
ul li:hover > ul {
display: block;
}
```
3. 解释一下 CSS 样式的作用:
- `list-style: none`:去掉列表项的默认样式;
- `margin: 0` 和 `padding: 0`:去掉列表项的边距和内边距;
- `position: relative`:使一级菜单相对于父元素进行定位;
- `position: absolute`、`top: 100%` 和 `left: 0`:使二级菜单相对于一级菜单进行定位,并且隐藏在一级菜单下面;
- `display: none`:隐藏二级菜单;
- `ul li:hover > ul`:当鼠标悬停在一级菜单上时,显示二级菜单。
通过这种方式,就可以实现一个带有两级下拉菜单的列表。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)