下拉 CSS 菜单收缩答案

【问题标题】：Dropdown CSS menu contracting下拉 CSS 菜单收缩
【发布时间】：2011-06-07 11:23:42
【问题描述】：

我已经在一个网站中实现了一个下拉菜单，在这里：

但是，下拉菜单本身似乎过早收缩。从初始按钮移动到下拉菜单中的选项时，有时很难保持下拉菜单处于打开状态。

这是代码有问题还是有什么影响它？有什么我可以做的吗？

谢谢！

【问题讨论】：

【解决方案1】：

您的下拉 div .dropdown_Xcolumns 有一个顶部 margin 4px，当鼠标在这 4px 上时，它会打破悬停（除非它做得非常快！）.. 删除上边距，一切都应该很好.

如果您想要 <li> 和下拉列表 div 之间的间隙效果 - 请尝试在该 div 上添加顶部白色边框

或者，保留上边距，并在容器<li>s 中添加 4px 底部填充以使它们更好地相遇

【讨论】：

【解决方案2】：

尝试在 menu.css 中将 margin: 4px auto; 的 margin: 2px auto; 更改为 .dropdown_buildings

【讨论】：

【解决方案3】：

您可以尝试为每个 li 元素添加 padding。它增加了悬停区域的有效表面积。当用户将鼠标悬停在顶部导航上并出现子菜单时，用户可以向下移动鼠标，由于他现在仍在填充区域内，因此悬停仍然处于激活状态。

【讨论】：