htmljs二级导航栏横向
时间: 2023-07-18 12:31:24 浏览: 126
vue二级路由设置方法
5星 · 资源好评率100%
要实现横向的二级导航栏,可以使用HTML和CSS结合来实现。以下是一个简单的示例代码:
HTML代码:
```
<nav>
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
display: block;
float: none;
}
nav ul ul li a {
color: #333;
padding: 10px;
text-decoration: none;
display: block;
}
nav ul li a {
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
nav ul li:hover {
background-color: #555;
}
nav ul li:hover a {
color: #fff;
}
```
通过上述代码,可以实现一个简单的带有横向二级导航菜单的网页导航栏。
阅读全文