用jquery+css+html写一个简单的二级导航
时间: 2023-10-21 14:03:40 浏览: 44
好的,下面是一个简单的二级导航的实现示例:
HTML代码:
```
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</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 ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
}
nav ul li ul li a {
padding: 5px;
color: #333;
text-decoration: none;
}
```
jQuery代码:
```
$(document).ready(function(){
$("nav ul li").hover(
function() {
$(this).children('ul').slideDown(200);
},
function() {
$(this).children('ul').slideUp(200);
}
);
});
```
以上代码实现了一个简单的二级导航,当鼠标滑过一级菜单时,显示对应的二级菜单。