Jquery实现带动画效果的经典二级导航菜单

以下是一个使用jQuery实现带动画效果的经典二级导航菜单的示例代码：
HTML代码：
```html

```
CSS代码：
```css
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px 20px;
background: #333;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #999;
}
nav ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 200px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 100%;
display: block;
}
```
JavaScript代码（script.js）：
```javascript
$(document).ready(function() {
$('nav ul li').hover(
function() {
// 显示子菜单
$(this).find('ul').slideDown();
},
function() {
// 隐藏子菜单
$(this).find('ul').slideUp();
}
);
});
```
这段代码定义了一个带有动画效果的二级导航菜单。当鼠标悬停在父菜单上时，子菜单会以向下滑动的动画效果显示出来；当鼠标离开父菜单时，子菜单会以向上滑动的动画效果隐藏起来。
你可以将以上代码复制到一个HTML文件中，并将jQuery库的链接替换为你自己的链接，然后将CSS样式代码保存为一个名为style.css的文件，并将JavaScript代码保存为一个名为script.js的文件。最后，你就可以在浏览器中打开该HTML文件来查看效果了。