一级菜单hover进入二级菜单，二级菜单不消失

 在写分级菜单时遇到问题：

     设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失

      根据一二级菜单DOM关系提出不同思路：

              一级菜单包裹二级菜单

                 

<a>
       一级菜单
        <ul>
                <li>二级菜单</li>  
        </ul>
</a>

          此种情况可直接使用css:hover选择器效果即可

            一二级菜单为兄弟关系            

           

<a class="sctnav_list_Details"  href="javascript:">
                           一级菜单
 </a>

<div class=" carousel_Details">
     <ul class=" carousel_left_Details">   

            <li>二级菜单</li>

      </ul>

</div>

思路：使用padding内边距属性，使一级菜单的内边距可以到达二级菜单的范围，同时设置如下css属性：

      注：如果出现移出一级菜单时二级菜单消失,多是一级菜单与二级菜单之间存在间隙(包括两者边框)

 .sctnav_list_Details:hover ~ .carousel_Details,
 .sctnav_list_Details ~ .carousel_Details:hover {
    display: block;
}

 两者DOM不存在关系时：

   思路：

         1)使用定时器，在移出一级菜单时创建定时器事件，延迟隐去二级菜单

             在二级菜单中建立移入移出事件：hover(),移入时清除上一步骤的定时器，移出时清除定时器并隐去二级菜单，注：此处不适合建立单纯mouseover()事件，会导致直接从二级菜单移出而二级菜单不消失问题

         2)使用鼠标定位，在移出一级菜单时判断鼠标是否进入二级菜单的范围

                      获取二级菜单DOM的坐标：

$ ( " section .nav_float" ). offset (). top ； /*获取当前元素距离 document文档 顶部距离*/

                      获取鼠标坐标

console . log (e. pageY ); /* 以当前文档为坐标定位 Y 轴距离 */

console . log (e. clientY ); /* 以当前页面窗口为坐标定位 Y 轴距离，不受滚动条影响 */

此处需注意采用的定位坐标是相对与文档还是可视窗口，鼠标定位与DOM定位选择需一致

另外还有定位坐标方法的浏览器兼容问题