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

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

HTML代码：

<nav>

  <ul class="main-menu">

    <li><a href="#">菜单1</a>

      <ul class="sub-menu">

        <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 class="sub-menu">

        <li><a href="#">子菜单4</a></li>

        <li><a href="#">子菜单5</a></li>

        <li><a href="#">子菜单6</a></li>

      </ul>

    </li>

    <li><a href="#">菜单3</a></li>

  </ul>

</nav>

CSS代码：

.nav {

  position: relative;

}

.main-menu li {

  display: inline-block;

  position: relative;

}

.sub-menu {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background-color: #ffffff;

  padding: 10px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.sub-menu li {

  display: block;

}

```

JavaScript代码：

```javascript

$(document).ready(function() {

  $(".main-menu li").hover(

    function() {

      $(this).find('.sub-menu').slideDown(200);

    },

    function() {

      $(this).find('.sub-menu').slideUp(200);

    }

  );

});

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

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

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