使用Jquery，实现二级导航动画

好的，这是一个比较基础的二级导航动画实现，你可以参考一下：

HTML 结构：

<ul class="nav">
  <li><a href="#">导航 1</a></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></li>
</ul>

CSS 样式：

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav > li {
  display: inline-block;
  position: relative;
}

.nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.nav ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  padding: 0;
  margin: 0;
}

.nav ul li {
  display: block;
}

.nav ul a {
  padding: 5px 10px;
}

.nav li:hover > ul {
  display: block; 
}

JS 代码：

$(document).ready(function() {
  $('.nav li').hover(function() {
    $('ul', this).stop().slideDown(200);
  }, function() {
    $('ul', this).stop().slideUp(200);
  });
});

这个代码中，我们首先使用 CSS 实现了二级导航的基本样式，然后通过 jQuery 实现了鼠标 hover 到一级导航上时，显示其子导航的动画效果。