CSS常见问题及解决（三）自己写下拉框逻辑，鼠标离开下拉框时，下拉出来的div会消失

下拉框在鼠标放到下拉出来的框的时候，下拉框消失，本应该是不管鼠标在下拉框内还是在弹出下拉框的div内，都应该使下拉框浮现

下拉框： 1、将hover事件监听到下拉框和弹出下拉框的div的父级元素上，即将两个元素同时添加hover事件 2、与此同时两个元素之间的缝隙不宜设置过大，这条纯属个人看法，迷惑css，在鼠标移动的过程中，滑过缝隙的时间几乎忽略不计

html：

<!--打印分享-->
<ul id="cRightPrint">
    <!--打印-->
    <li class="cPrint dropMenu" id="print">
        Print
        <!--打印的下拉列表-->
        <ul class="printUl" id="printSelect">
            <li><a href="#">打印</a></li>
            <li><a href="#">重印</a></li>
        </ul>
    </li>
    <!--分享-->
    <li class="cPrint dropMenu" id="share">
        Share
        <!--分享的下拉列表-->
        <ul class="printUl" id="shareSelect">
            <li><a href="#"><img src="img/content/icon.email.16.png">微信</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">微博</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">邮件</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">QQ</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">微信</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">微博</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">邮件</a></li>
            <li><a href="#"><img src="img/content/icon.email.16.png">QQ</a></li>
        </ul>
    </li>
</ul>

css：

/*三种功能的li默认样式，以download为主*/
#cRightPrint .cPrint{
   width: 154px;
   height: 40px;
   line-height: 40px;
   padding-left: 10px;
   font-weight: 800;
   color: #fff;
       background-color: #333;
       border-radius: 6px;
       margin-bottom: 6px;
       position: relative;
}
/*第二个功能print*/
#cRightPrint #print{
   width: 49%;
   /*min-width: 80px;*/
   padding: 0;
   text-align: center;
   float: left;
}
/*第三个功能share*/
#cRightPrint #share{
   width: 49%;
   /*min-width: 80px;*/
   padding: 0;
   /*margin-right: -10px;*/
   text-align: center;
   float: right;
}
#cRightPrint li:hover{
   background: #3C63AF;
   border-radius: 6px;
   cursor: pointer;
}
/*鼠标滑过菜单显示：只针对第二三个功能*/
.cPrint .printUl{
   /*top: 40px;*/
   width :100%;
   margin-top: 1px;
   /*padding-left: 4px;*/
   border-radius: 5px;
   background: #3C63AF;

   display: none;
   position: absolute;
}
.cPrint .printUl li{
   text-align: left;
}
.cPrint .printUl li a{
   font-size: 12px;
   padding-left: 10px;
   color: #fff;
}

.cPrint .printUl li a:hover{
   color: #A7BEE9;
}
/*图标*/
.cPrint .printUl li a img{
   width: 12px;
   height: 10px;
   padding-right: 6px;
}

js：

6、下载打印分享等鼠标滑过信息显示
        printMouseOver: function () {
            var _self = this;

            // 下载鼠标效果
            $("#dloadPdf_span").hover(function(){
                $(".pulldown").css("display","block");
            },function(){
                $(".pulldown").css("display","none");
            });

            // 打印分享鼠标进入
            $('.dropMenu').hover(
                function () {
                    $(this).find('.printUl').css({
                        'display': 'block'
                    });

                },
                // 鼠标滑出
                function () {
                    $(this).find('.printUl').css({
                        'display': 'none'
                    });
                });
        },