CSS菜单项在悬停时消失

Question

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

当我将鼠标项目（产品I）悬停在大部分时间时，它不会突出显示，如图所示 - 相反，子项目消失了。怎么解决？ CSS代码在jsFiddle中可用。如果您可以指定需要做哪些更改来解决此问题，那将是一件好事。

儿童的预期行为

Answer 1

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

Answer 2

好的，我想我明白了，请查看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 3

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

解决方案应该是#cssmenu＆gt;的无缝（或无间隙）转换。 li到子菜单。