二级导航栏怎么做html
时间: 2023-07-13 18:13:51 浏览: 101
要创建二级导航栏,可以使用HTML和CSS。以下是一个简单的示例:
HTML代码:
```
<div class="navbar">
<a href="#">主页</a>
<div class="dropdown">
<button class="dropbtn">关于我们
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">公司简介</a>
<a href="#">团队介绍</a>
</div>
</div>
</div>
```
CSS代码:
```
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #555;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
```
在上面的示例中,我们首先创建了一个包含主页和下拉菜单的导航栏。下拉菜单是通过设置一个具有下拉菜单的按钮和一个包含链接的下拉菜单内容的div来创建的。CSS被用来定义导航栏和下拉菜单的样式,并且当鼠标悬停在下拉菜单上时显示下拉菜单。
阅读全文