<div class="daohanglan">
    <div class="dh">小米手机 <--多个自己定义-->
        <div class="dhbottom">
　　　　 </div>
　　 </div>
</div>

.dh{

    height: 88px;
    float: left;
     font-size: 16px;
    text-align:center;
    line-height:88px;
    padding-left: 20px;
    color: #333;
    /*margin-right: 5px;*/
}

.daohanglan{
    width: 820px;
    height: 88px;

    padding: 12px 0 0 30px;
    float: left;
}

.dhbottom{
    width: 100%;
    background-color: white;
    position: absolute;
    left: 0;
    right: 100px;
      z-index: 787;
    display: none;
}

$(document).ready(function(){
    let tag=0;
    $(".daohanglan").mouseenter(function(){  <!--.daohanglan为导航栏所在的块，.dh为显示的导航标题，.dhbottom为移入所要显示出来的列表-->

        tag=3;
        console.log("daohanglan移入");
    });
     $(‘.dh‘).hover(function(){
            $(this).mouseenter(function(){
                tag=1;
                console.log("dh移入");
            });
            if(tag===1)
                {

                    $(this).children(‘.dhbottom‘).css({height:230}).css({display:"block"}).show();

                }
                if(tag===3){
                    $(this).children(‘.dhbottom‘).animate({height:230},500).show();


                }
      },function(){
            $(this).children(‘.dhbottom‘).animate({height: 0}, 500).hide();

    });

});

小米下拉框jQuery实现