打开不同的子菜单时隐藏子菜单

<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>
</ul>

.sub-menu {
  display: none;
}

.main-menu li:hover .sub-menu {
  display: block;
}

$(document).ready(function() {
  $('.main-menu li').hover(
    function() {
      $(this).find('.sub-menu').show();
    },
    function() {
      $(this).find('.sub-menu').hide();
    }
  );
});