<CSS>一级导航栏和二级导航栏
为了创建一级导航栏和二级导航栏,你可以使用HTML和CSS来实现。以下是一个简单的例子:
HTML:
<nav>
<ul class="navbar">
<li><a href="#">一级导航项 1</a>
<ul class="subnavbar">
<li><a href="#">二级导航项 1.1</a></li>
<li><a href="#">二级导航项 1.2</a></li>
</ul>
</li>
<li><a href="#">一级导航项 2</a></li>
<li><a href="#">一级导航项 3</a></li>
</ul>
</nav>
CSS:
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.subnavbar {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display: none;
background-color: #f9f9f9;
}
.navbar li:hover .subnavbar {
display: block;
}
.subnavbar li a:hover {
background-color: #555;
}
这个例子中,一级导航栏由 <ul>
和 <li>
组成,二级导航栏嵌套在 <ul>
里面。当鼠标悬停在一级导航项上时,相应的二级导航项就会显示出来。这个例子使用了CSS来控制样式,并通过HTML结构来组织导航栏。
评论已关闭