javascript - 在悬停时保留子菜单

Question

当我将鼠标悬停在它上面时，我试图让我的子菜单出现。目前，当我将鼠标悬停在 Locations 上时它会消失。

我的演示:http://jsfiddle.net/269yqavo/

这是我的代码:

$('.main a.primary').hover(function(e){
	e.preventDefault();
	$(this).next().toggle();
}).hover();

.sub-menu {display:none;background:#ccc}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="sf-menu">
    <li class="main">
      <a href="" class="primary">Locations</a>

      <ul class="sub-menu">
        <li><a href="/location/athina/" title=
        "View all posts in Athina">Athina</a></li>

        <li><a href="/location/beirut/" title=
        "View all posts in Beirut">Beirut</a></li>

      </ul>
    </li>
  </ul>

Answer 1

这是一个完全没有 JS 的解决方案。只需在容器悬停时显示子菜单。

http://jsfiddle.net/269yqavo/1/

.sub-menu {
    display:none;
    background:#ccc
}

.main:hover .sub-menu {
    display: block;
}