显示效果

二级菜单滑动显示，注意会有个防抖节流问题，居然用stop就解决了！

不触发的状态

鼠标移上

鼠标移出效果还原

代码实现

结构

<div class="category" >
  <span>Category :</span>
  <div class="cate-choose">
    <div class="atitle">
      <div class="item active-item cur">
        <a>
          <p class="active-p">Household DIY</p>
        </a>
      </div>
      <div class="item-child">
        <ul>
          <li><a href="#">Vases</a></li>
          <li><a href="#">Decoration Material</a></li>
          <li><a href="#">Lanterns</a></li>
          <li><a href="#">Living Room Decoration</a></li>
          <li><a href="#">Decoration Pots</a></li>
          <li><a href="#">Artificial Flowers</a></li>
          <li><a href="#">LED Items</a></li>
          <li><a href="#">Decoration Trays/Plate</a></li>
          <li><a href="#">Papeterie</a></li>
        </ul>
      </div>
    </div>
    <div class="atitle">
      <div class="item">
        <a><p>Auto Tool</p></a>
      </div>
      <div class="item-child">
        <ul>
          <li><a href="#">Vases</a></li>
          <li><a href="#">Decoration Material</a></li>
          <li><a href="#">Lanterns</a></li>
          <li><a href="#">Living Room Decoration</a></li>
          <li><a href="#">Decoration Pots</a></li>
          <li><a href="#">Artificial Flowers</a></li>
          <li><a href="#">LED Items</a></li>
          <li><a href="#">Decoration Trays/Plate</a></li>
          <li><a href="#">Papeterie</a></li>
        </ul>
      </div>
    </div>
</div>

样式

.category .atitle{
    position: relative;
    transition: 0.6s;
}

.category .item{
    display: inline-block;
    height: 50px;
    transition: 0.4s;
}

.category .atitle .item-child{
    background-color: #9d9d9d;
    position: absolute;
    z-index: 2;
    text-align: center;
    border: 1px solid #666;
    display: none;
}

.category .atitle .item-child li{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #666;
}

.category .atitle .item-child li:hover{
    background-color: #F5F5F5;
}

.category .atitle .item-child li:hover a{
    color: #D2181A;
}

.active-item{
    background-color: #F5F5F5;
}

.category .atitle .active-itemchild{
    display: block;
}

.category .item p{
    font-size: 16px;
    font-family: Helvetica;
    font-weight: 400;
    color: #666666;
    line-height: 50px;
    margin: auto;
    text-align: center;
}

.category .item .active-p{
    color: #D2181A;
}

JS

$('.category .atitle').hover(
    function(){
        // 先隐藏所有的
        $('.category .item').removeClass('active-item')
        $('.category .item p').removeClass('active-p')
        $('.category .item-child').removeClass('active-itemchild')

        // 当前的显示
        $(this).find('.item').addClass('active-item')
        $(this).find('p').addClass('active-p')
        $(this).find('.item').next().stop().slideDown()
    },function(){
        // 隐藏所有的
        $('.category .item').removeClass('active-item')
        $('.category .item p').removeClass('active-p')
        $('.category .item-child').removeClass('active-itemchild')
        $(this).find('.item').next().stop().slideUp()

        // 给当前页面加上
        $('.cur').addClass('active-item')
        $('.cur p').addClass('active-p')
    }
)