悬停时无法访问下拉菜单，缩小差距答案

【问题标题】：Cannot access dropdown menu on hover, close gap悬停时无法访问下拉菜单，缩小差距
【发布时间】：2015-11-19 22:21:04
【问题描述】：

我的网站有一个带有下拉菜单的导航栏。在宽度为 1024 像素的设备（12 英寸和 13 英寸桌面）上，我的导航栏会变得响应并堆叠成 2 行以适应较小的屏幕尺寸。

当我将鼠标悬停在导航栏顶行的菜单项上时，下拉菜单会显示在导航栏底行的下方。这会产生一个中断悬停动作的间隙。我只需要在导航栏的顶行菜单项上缩小差距。我通过检查要向上移动的下拉菜单的元素复制了以下代码：

.navbar-nav>li>.dropdown-menu {
margin-top: -10px;
}

.dropdown .dropdown-menu {
border-radius: 0;
top: 120% !important;
}

.yamm .dropdown-menu {
left: auto;
}

.dropdown-menu {
min-width: 110px;
padding-right: 25px;
}

.dropdown-menu {
z-index: 1021;
position: absolute;
display: none;
float: left;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

如果您需要更好的解释，您可以在 greenenvysupply.com 上查看并放大您的屏幕尺寸，直到导航栏堆叠并形成两行。然后尝试将鼠标悬停在其下方有菜单项的顶行菜单项上。您将无法访问下拉菜单。

我尝试了以下代码，认为我只能在 1024 像素的屏幕尺寸上调整上边距：

@media (width: 1024px) {
   #menu-item-5044 .dropdown-menu, #menu-item-5066 .dropdown-menu, 
   #menu-item-5076 .dropdown-menu, #menu-item-5085 .dropdown-menu, 
   #menu-item-5113 .dropdown-menu, #menu-item-5129 .dropdown-menu, 
   #menu-item-5128 .dropdown-menu, #menu-item-5111 .dropdown-menu {
      margin-top: -67px !important;
   }
}

当我对此进行测试时，我没有看到任何变化。我对编码和网页设计完全陌生，如果我做错了什么，请纠正我！

【问题讨论】：

您应该在问题中发布相关的 HTML 和 CSS，而不是简单地包含链接。目前还不清楚（对我来说）问题是什么。最后，当您真正要做的只是.dropdown-menu { margin-top: -67px !important; } 时，您不需要设置多个样式声明。小心 CSS 中的过度规范。
好的，我会这样做的。通过多个声明，您指的是菜单项吗？我不希望所有菜单项都受到影响，只影响列出的那些。
如果这是菜单项的子集，您至少可以用逗号分隔它们并且仍然有一个规则，例如#menu-item-1 .dropdown-menu, #menu-item-2 .drop-menu { ... }.

标签： css twitter-bootstrap drop-down-menu navbar jquery-hover

【解决方案1】：

查看指定 URL 处的代码，我注意到很多 CSS 冲突。 .dropdown-menu 元素的 top 位置被多次设置，并使用 !important 声明完成，这将使其难以覆盖。

当我在 Chrome 检查器中检查 .dropdown-menu 元素并禁用所有 top 定位时，例如：

 .dropdown .dropdown-menu {
    top: 120% !important;
 }

我能够看到出现在触发器下方的菜单。我会先移除它，看看它是否能让你更接近。

但简而言之，如果不重做大量 CSS，我认为这里没有简单的解决方案。我还认为，如果你试图改变出现在顶行的少数菜单的位置，你就是在打一场失败的战斗。

【讨论】：