css设置三级导航栏样式
时间: 2023-08-07 18:12:36 浏览: 61
可以使用CSS的伪类选择器`:hover`来设置三级导航栏的样式。以下是一个简单的例子:
HTML代码:
```
<ul>
<li><a href="#">一级导航1</a>
<ul>
<li><a href="#">二级导航1</a>
<ul>
<li><a href="#">三级导航1</a></li>
<li><a href="#">三级导航2</a></li>
</ul>
</li>
<li><a href="#">二级导航2</a></li>
</ul>
</li>
<li><a href="#">一级导航2</a></li>
</ul>
```
CSS代码:
```
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position: relative;
float: left;
}
ul li a {
display: block;
padding: 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
}
ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
}
ul li:hover ul {
display: block;
}
ul li ul li {
float: none;
width: 100%;
}
ul li ul li a {
padding: 5px 10px;
}
ul li ul li ul {
left: 100%;
top: 0;
}
ul li ul li:hover > ul {
display: block;
}
```
在这个例子中,我们使用了三个`<ul>`元素来表示三级导航栏。我们通过CSS设置了一些基本样式,然后使用`:hover`伪类选择器来显示下一级导航栏。在第三级导航栏中,我们使用了`>`选择器来仅在悬停在直接父级菜单项上时显示下一级菜单项。
相关推荐
![](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)