Question

我的网站有一个带有下拉菜单的导航栏。在宽度为1024px（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并放大屏幕大小，直到导航栏堆叠并形成两行。然后尝试将鼠标悬停在其下方有菜单项的顶行菜单项上。您将无法访问该下拉列表。

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

@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

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

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

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

我能够看到菜单出现在触发器下方。我开始删除它，看看它是否让你更近。

但总之，我不认为这里有一个简单的解决方案，而无需重做很多CSS。如果你试图改变出现在最上面的少数几个菜单的位置，我也认为你正在打一场失败的战斗。

悬停时无法访问下拉菜单，关闭差距

1 个答案: