覆盖css悬停，以便它什么都不做

Question

具体来说，我正在研究Wordpress中二十世纪的儿童主题。

我要做的是将移动菜单的宽度更改为更大的屏幕尺寸。

我遇到的问题是覆盖悬停，以便它什么都不做。

二十二有：

 @media screen and (min-width: 600px){

        .main-navigation ul li:hover > ul {
            display: block;
        }
}

我想要ipad上的移动菜单，所以我尝试了：

@media screen and (max-width: 768px){

        .main-navigation ul li:hover > ul {
            display: none;
        }
}

当然这会覆盖它，但会做得太多。如果.main-navigation ul li ul可见，该怎么办？当.main-navigation ul li：hover它消失了。

我需要它实际上做什么，而不是隐藏它......

Answer 1

首先，只有当屏幕达到 601 和 767 像素之间的宽度时，才会触发第二个媒体查询。

其次，如果你想为其中一个媒体查询建立先验，你可以使用!important声明 - 我可以说这是我的常见做法。 Learn more.

---

根据评论进行编辑。

尝试以下方法：

@media screen (min-width: 601px) and (max-width: 768px){
    .main-navigation ul li:hover > ul {
        display: none;
    }
}