html二级导航栏横向
时间: 2023-07-18 22:03:19 浏览: 71
可以使用HTML和CSS来创建横向的二级导航栏。以下是一个简单的示例:
HTML代码:
```
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</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="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav li:hover > ul {
display: block;
}
```
示例中,一级菜单使用了`display: inline-block`来实现横向排列,而二级菜单使用了绝对定位`position: absolute`和`top: 100%; left: 0`来实现在一级菜单下方显示。在鼠标悬停在一级菜单上时,通过`nav li:hover > ul { display: block; }`来显示二级菜单。
阅读全文