Question

我想制作一个菜单（子菜单和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/

希望你理解。谢谢！

Answer 1

我确信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>

这样，您可以使用CSS来实现您的目标：

ul li ul{
  display: none;
}
ul li:hover > ul{
  display: block;
}
ul li ul li:hover > ul{
  display: block;
}

一旦你徘徊在第一个li上，它就会显示直接的孩子ul，如果你将鼠标悬停在那个ul上，它仍将被视为悬停在第一个li上，这意味着它仍然可见。

小提琴：http://jsfiddle.net/x54gZ/

Answer 2

如上所述，您可能需要在<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%;
}

演示 http://jsfiddle.net/zu8Eu/27/

移动鼠标时保持子菜单

2 个答案: