html左侧导航栏点击下拉菜单,CSS中的导航栏和下拉菜单的实现
时间: 2023-09-08 15:12:10 浏览: 42
实现一个带有下拉菜单的导航栏,可以使用HTML中的`<ul>`和`<li>`标签,以及CSS中的伪类(`:hover`)和绝对定位(`position: absolute`)属性。
HTML代码示例:
```
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Our History</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
CSS代码示例:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #555;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
nav ul ul li:hover {
background-color: #666;
}
```
解释:首先,我们将导航栏的无序列表的样式设置为无序列表样式(`list-style: none;`),并将其外边距和内边距都设置为零。然后,我们将列表项(`<li>`标签)设置为`inline-block`,并将其相对定位(`position: relative;`),以便我们可以在其上下文中绝对定位下拉菜单。我们还设置了列表项中的链接(`<a>`标记)的样式,以便它们看起来像按钮。然后,我们使用CSS伪类(`:hover`)将鼠标悬停在列表项上时,显示下拉菜单。下拉菜单是使用绝对定位(`position: absolute;`)放置在列表项下方的。我们还将下拉菜单的样式设置为灰色背景和白色文本,以使其与导航栏区别开来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)