要在 HTML 中添加二级导航栏,可以使用嵌套列表(Nested List)的方式来实现。
具体步骤如下:
<ul>
标签来创建无序列表,使用 <li>
标签来创建列表项。例如:<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
和 <li>
标签来创建一个嵌套的无序列表,例如:<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
在上面的例子中,"About" 列表项下面嵌套了一个新的无序列表,其中包含了 "Company"、"Team" 和 "History" 三个列表项,这就是一个二级导航栏。
ul li ul {
display: none;
}
ul li:hover > ul {
display: block;
}
上面的 CSS 样式会将二级导航栏的默认显示效果设置为隐藏,只有当鼠标移到 "About" 列表项上时,才会将二级导航栏显示出来。
关键词高亮:嵌套列表、无序列表、列表项、CSS样式、下拉菜单。