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

Question

我的网站有一个带下拉菜单的导航栏。在宽度为 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;
   }
}

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

Answer 1

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

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

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

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

但简而言之，如果不重做很多 CSS，我认为这里没有简单的解决方案。我还认为，如果您试图更改出现在顶行的少数菜单的位置，那么您就是在打一场必败仗。

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

Cannot access dropdown menu on hover, close gap

css

twitter-bootstrap

drop-down-menu

navbar

jquery-hover