CSS菜单项在悬停时消失

Question

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

当我将鼠标悬停在子项(产品I)上时，大多数情况下它不会高亮显示，如图所示-相反，子项会消失。如何解决？CSS代码在jsFiddle中可用。如果您可以指定需要做哪些更改才能解决这个问题，那就更好了。

儿童的预期行为

​

​

Answer 1

好的，我想我知道了，检查一下Fiddle

/*added padding-bottom: 8px;*/
#cssmenu ul li.has-sub:hover > a{ background:#FF5500; border-color:#FF5500;  top:-1px; z-     index:999;  padding-bottom: 7px;} 

Answer 2

这个问题是<li class="has-sub">的高度小于<ul>的高度，所以当您在<li>上向下移动鼠标时，它将停止悬停<li>而开始悬停<ul>。

Answer 3

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

解决方案应该是从#cssmenu > li到子菜单的无缝(或无间隙)转换。