1

我有一个使用 CSS 实现的菜单，如http://jsfiddle.net/Lijo/vZgTP/所示。

当我将鼠标悬停在子项（产品 I）上时，大多数情况下它不会如图所示突出显示 - 而是子项消失了。如何解决？CSS 代码在 jsFiddle 中可用。如果您可以指定需要进行哪些更改来解决此问题，那就太好了。

儿童的预期行为

儿童的预期行为

4

3 回答 3

1

问题是 的高度<li class="has-sub">小于 的高度<ul>，因此当您将鼠标向下移动到 时，<li>它将停止悬停<li>并开始悬停<ul>。

于 2012-07-04T13:24:42.790 回答
1

好的，我想我明白了，检查小提琴

/*added padding-bottom: 8px;*/
#cssmenu ul li.has-sub:hover > a{ background:#FF5500; border-color:#FF5500;  top:-1px; z-     index:999;  padding-bottom: 7px;}
于 2012-07-04T14:26:56.923 回答
0

还没有找到合适的解决方案，但我想我找到了原因。当您将鼠标缓慢向下移动到子菜单时，有几个像素光标不再悬停在#cssmenu > li 上。这当然会导致子菜单消失。相反，如果您快速移动鼠标，则浏览器会在子菜单中触发鼠标事件。

解决方案应该是从 #cssmenu > li 到子菜单的无缝（或无间隙）过渡。

于 2012-07-04T13:22:11.447 回答