Css 在导航栏崩溃后禁用悬停效果

我有一个带下拉菜单按钮的引导导航栏，当鼠标悬停在上面时，它会自动下拉。然而，当菜单被折叠时（点击768px），我想禁用这个悬停效果，这样菜单只有在点击按钮时才会下降

我尝试了一些不起作用的事情。现在我正在尝试使用媒体查询来禁用悬停效果，但我不确定如何继续。任何建议都将不胜感激

.dropdown:hover .dropdown-menu {
    display: block;
}

@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

 .dropdown:hover .dropdown-menu {
    /*disable the display:block; property*/
    }
}

---

编辑：我正在使用的代码。如果您单击屏幕右上角的移动图标，您将能够看到该条在折叠菜单时的反应。

您可以在媒体查询中更改该规则的显示值，不确定您想要的是什么，但可能是

inline

或

inline block

（或

none

如果您不想获得

。下拉菜单

来显示）：

---

没有“禁用”规则属性这样的事情，但是，您可以将其更改为另一个值，如我在这里所示。

我相信您需要做的就是将悬停规则设置为仅在767px以上工作，然后移动导航栏将在默认规则上运行

参见工作示例

• 我添加了一个自定义类到

  navbar

  （

  navbar custom

  ，在本例中，或者如果你这样做的话，任何有意义的东西）这样核心就不会被直接覆盖。这不是所有工作都需要的，我觉得这是一个最佳实践

@介质（最小宽度：767px）{
.navbar自定义.下拉菜单：悬停.下拉菜单{
显示：块；
}
}

切换导航

谢谢你的想法。不幸的是，无论是内联还是内联块都没有禁用悬停时的自动下拉行为。只是编辑添加

无

。也许这就是你所需要的。只是尝试一下，但结果会有问题；当点击按钮显示菜单时，菜单会反复闪烁。我假设它正在激活e显示：鼠标悬停在菜单上时无。您基本上是想停止悬停操作，并在媒体查询达到768px时返回单击事件吗？不清楚“放大后”是什么是指。是的，这正是我想做的。很抱歉没有说得更清楚。我将编辑我的问题。非常感谢。这个解决方案非常有意义；效果非常好！

@media (max-width: 767px) 
{
    .dropdown:hover .dropdown-menu {
        display: none;
    }
}