编写较为复杂的下拉菜单,实现导航二级菜单效果 html
时间: 2023-05-16 09:06:27 浏览: 77
和JavaScript可以实现下拉菜单,具体实现方法可以参考以下代码:
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>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
z-index: 1;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
padding: 5px 10px;
color: #333;
text-decoration: none;
}
nav ul ul li a:hover {
background-color: #f5f5f5;
}
```
JavaScript代码:
```
// 获取所有的下拉菜单
var dropdowns = document.querySelectorAll('nav ul li');
// 遍历所有的下拉菜单
for (var i = 0; i < dropdowns.length; i++) {
// 给每个下拉菜单添加鼠标移入事件
dropdowns[i].addEventListener('mouseenter', function() {
// 获取当前下拉菜单的子菜单
var dropdown = this.querySelector('ul');
// 显示子菜单
dropdown.style.display = 'block';
});
// 给每个下拉菜单添加鼠标移出事件
dropdowns[i].addEventListener('mouseleave', function() {
// 获取当前下拉菜单的子菜单
var dropdown = this.querySelector('ul');
// 隐藏子菜单
dropdown.style.display = 'none';
});
}
```
这样就可以实现一个简单的导航二级菜单效果了。