必须使用js或jQuery制作二级导航,请写个例子,请写出代码
时间: 2023-12-11 15:06:08 浏览: 73
好的,以下是一个简单的例子:
HTML 代码:
```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 代码:
```css
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
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;
width: 100%;
}
nav ul ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul ul li a:hover {
background-color: #f5f5f5;
}
```
JavaScript 代码(使用 jQuery):
```javascript
$(document).ready(function() {
$('nav ul li').hover(function() {
$(this).children('ul').stop().slideDown(200);
}, function() {
$(this).children('ul').stop().slideUp(200);
});
});
```
以上代码实现了一个简单的二级导航菜单。当鼠标悬停在一级菜单上时,会显示对应的二级菜单;当鼠标移开时,二级菜单会隐藏。
阅读全文