一级菜单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定位选择需一致

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