jquery二级导航css样式如何编写

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a>
    <ul class="sub-menu">
      <li><a href="#">Electronics</a></li>
      <li><a href="#">Clothing</a></li>
      <li><a href="#">Books</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

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

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

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

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0;
  margin: 0;
}

.sub-menu li {
  display: block;
}

.sub-menu li a {
  padding: 10px 20px;
}

$(document).ready(function() {
  $('.nav > li').hover(
    function() {
      $(this).find('.sub-menu').slideDown(200);
    },
    function() {
      $(this).find('.sub-menu').slideUp(200);
    }
  );
});

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px; /* 根据需要调整宽度 */
}

$(document).ready(function() {
  $('.nav > li').on('mouseenter', function() {
    $(this).find('.sub-menu').slideDown(200);
  }).on('mouseleave', function() {
    $(this).find('.sub-menu').slideUp(200);
  });
});