Javascript 移动鼠标时保持子菜单

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

大概是这样的：

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

当您尝试打开链接时，是否可以继续列出子菜单？如果将鼠标从“bbb2”链接移动，则会消失

我现在所拥有的：
我想要的是：

以下是JSFIDLE：

---

希望你能理解。谢谢

我确信jQuery插件将为您提供您想要实现的功能，但是我要说的是重新构造HTML并正确嵌套元素

<ul>
    <li><a href="#">Menu 1</a>
        <ul>
            <li>
                <a href="#">Submenu 1</a>
                <ul>
                    <li>
                        <a href="#">Subsub menu</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

在第一个li上悬停后，它将显示直接子ul，如果在该ul上悬停，它仍将被视为在第一个li上悬停，这意味着它仍然可见

---

Fiddle:

如前所述，您可能需要将

嵌套在

li

元素中。但是，为了保持

悬停（）

，您可以使用

填充设置空白：

HTML

演示
更改您的HTML（和CSS），使链接成为
元素的子元素。@Blazemonger不是那么容易吗？您试过他提供的小提琴吗？不，这不是小事，但它是最好的方法——通过创建
标记的子链接，当您将鼠标移到悬停事件上时，悬停事件将保持不变。检查我的小提琴，我这样做@Blazemonger如果木块有绝对位置，但不在li旁边，中间的空间不被认为是
li
@Danko-我的小提琴是最基本的，他应该能够阅读并更改代码。他甚至可以从他的问题中学到一些东西，而不是别人用勺子喂他代码。是的，这是一个很好的方法，但是如果你把这个应用到他的小提琴上，你会发现这不是全部的解决方案。。。如果块具有绝对位置，但不在li旁边，则不认为li之间的空间为
li
如何对所有链接使用相同的位置<代码>位置：绝对在这里不起作用。我的意思是，结果也是一样。@Danko-没错，我没有考虑绝对定位，我的“解决方案”在这种情况下不起作用。很高兴帮助你交配
ul li ul{
  display: none;
}
ul li:hover > ul{
  display: block;
}
ul li ul li:hover > ul{
  display: block;
}

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

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