响应式菜单：在悬停子菜单上显示错误

Question

简短的故事：我从教程中创建了一个响应式菜单。当您将鼠标悬停在投资组合按钮上时，菜单应显示子菜单，而在移动模式下，您需要按下按钮以显示子菜单（工作正常）。问题是该教程有一个错误：如果您在桌面模式下按组合按钮，除非您按下（单击）按钮，否则子菜单将不再显示，如在移动模式下。

以下是实例：http://armandorodriguez.pe/info 我试着在这里编写代码，但是不理解说明，所以这里是jsfiddle：jsfiddle.net/x44w1twf /

所以基本上我需要的是，如果我在桌面模式下它总是在悬停时显示子菜单，即使我按下组合按钮，也只在我按下按钮时在移动设备上。现在我想这可以通过js中的简单代码解决，但我对js一无所知，所以任何帮助都会受到赞赏。

Answer 1

当您单击元素以隐藏它时，设置样式内联display: none并覆盖样式：

header nav ul li:hover .children {
    display:block;
}

所以添加！重要的是这样的风格：

header nav ul li:hover .children {
    display:block !important;
}

Here a working jsfiddle example

对于移动设备中的正常行为，只需在以下媒体中添加样式：

@media screen and (min-width: 800px) {    
    header nav ul li:hover .children {
       display:block !important;
    }
}