【发布时间】：2014-10-13 12:25:38
【问题描述】：
请查看fiddle，您会很快看到问题。
我将:hover 用于我的 CSS 菜单中的子项。当我将鼠标悬停在子项目上时，由于容器的大小减小，我无法再到达“项目三”，并且我的光标位置不再悬停。
你会如何解决这个问题？有纯 CSS 解决方案吗？
子项显示使用.has-children类：
#menu li.has-children:hover ul#sub-menu {
display: block;
}
【问题讨论】：
-
@Alek 和我的 JSFiddle 是同一个链接，你提到的解决方案到底是什么？
-
问题是当您将鼠标悬停在它们上方时显示的项目数量与下方的项目数量相同，因此当您将鼠标悬停从这两个新显示的项目上移开时，您就在您的列表定期结束。也许使用 CSS 过渡让用户有时间移动鼠标？
-
你好 :) 我不是 CSS 专家，但你如何在它的右侧而不是在项目下方显示子项目
-
@Cedie 因为设计不是这样的
-
快点，除非您知道在另一个字段中永远不会有子菜单，否则我不会推荐您使用的 ID 特定 CSS 样式。有类的东西，甚至只是有一个孩子 ul 的事实就足够了。