Mouseover Mouseleave - 子子菜单

Question

我使用ul完成了以下菜单

<ul class="offerings">
   <li><a>NO SubMenu</a></li>
   <li><a>With SubMenu</a>
      <ul id="submenu">
        <li><a href="">SubMenu 1</a></li>
        <li><a href="">SubMenu 2</a></li>
      </ul>
   </li>

当我将鼠标悬停在子<a>With SubMenu</a>菜单选项上时,相应的子菜单(id =子菜单)应显示AND当我在子菜单上执行MOUSEOUT时<a>With SubMenu</a>应该隐藏.

使用mouseenter很容易实现悬停,但问题在于使用mouseleave <li><a>With SubMenu</a>.

问题:

如果子菜单打开并且鼠标在子菜单框内移动 - 将触发Mouseout事件<a>With SubMenu</a>导致子菜单隐藏.如何解决这个问题？

我应该尝试鼠标坐标,然后忽略Mouseleave中写的其余功能.

https://jsfiddle.net/vkfc9jwc/6/

Answer 1

用css也可以实现这样的事情:

ul ul{display:none;} /* hide the sub-list */

li:hover ul{display:block;} /* on hover of li show ul if "li" has */

<ul class="offerings">
  <li><a>NO SubMenu</a></li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a></li>
      <li><a href="">SubMenu 2</a></li>
    </ul>
  </li>
</ul>