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

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

HTML代码：

<nav>
<ulclass="main-menu">
<li><ahref="#">菜单1</a>
<ulclass="sub-menu">
<li><ahref="#">子菜单1</a></li>
<li><ahref="#">子菜单2</a></li>
<li><ahref="#">子菜单3</a></li>
</ul>
</li>
<li><ahref="#">菜单2</a>
<ulclass="sub-menu">
<li><ahref="#">子菜单4</a></li>
<li><ahref="#">子菜单5</a></li>
<li><ahref="#">子菜单6</a></li>
</ul>
</li>
<li><ahref="#">菜单3</a></li>
</ul>
</nav>

CSS代码：

.nav{
position:relative;
}
.main-menuli{
display:inline-block;
position:relative;
}
.sub-menu{
display:none;
position:absolute;
top:100%;
left:0;
background-color:#ffffff;
padding:10px;
box-shadow:02px5pxrgba(0,0,0,0.1);
}
.sub-menuli{
display:block;
}
```
JavaScript代码：
```javascript
$(document).ready(function(){
$(".main-menuli").hover(
function(){
$(this).find('.sub-menu').slideDown(200);
},
function(){
$(this).find('.sub-menu').slideUp(200);
}
);
});

这段代码首先使用jQuery选择器找到.main-menu li元素，然后使用hover()方法为每个菜单项添加鼠标悬停事件。

当鼠标悬停在菜单项上时，通过slideDown()方法展开对应的子菜单；当鼠标离开菜单项时，通过slideUp()方法收起对应的子菜单。

请注意，这只是一个基本示例，你可以根据需要自定义样式和动画效果。