一级菜单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定位选择需一致
另外还有定位坐标方法的浏览器兼容问题