javascript - 移动鼠标时保持子菜单

我要制作一个菜单（子菜单和div包含悬停中每个子菜单的链接）。

像这样：

AAAA | BBBB
     | bbb1
     | bbb2   HERE IS MOUSE (bbb2 LINK)
     | bbb3

当您尝试打开链接时，是否可以保留列表子菜单？如果将鼠标从“ bbb2”链接移走，则该链接消失。

我现在所拥有的：
http://i.imgur.com/vhFtaQc.png
和我想要的：
http://i.imgur.com/BOQNMat.png

这是JSFiddle：http://jsfiddle.net/zu8Eu/

希望你能理解。谢谢！

最佳答案

如前所述，您可能需要将<div>嵌套在li元素内。但是要保留hover()，还可以使用padding设置空白：

的HTML

<li id="submenu1">
  <a href="#" title="submenu1">aaaa1</a>
  <div class="one">
    <a href="1.html">Link for aaa1</a>
  </div>
</li>

的CSS

.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}