javascript - 响应式菜单 : on hover submenu shows error

Question

长话短说:我根据教程创建了一个响应式菜单。当您将鼠标悬停在投资组合按钮上时，菜单应该会显示子菜单，而在移动模式下，您需要按下按钮才能显示子菜单(效果很好)。问题是教程有一个错误:如果您在桌面模式下按下投资组合按钮，子菜单将不会再次显示，除非您按下(单击)按钮，就像在移动模式下一样。

这是实际示例:http://armandorodriguez.pe/info
我试着在这里写代码，但不明白指令，所以这是jsfiddle:jsfiddle.net/x44w1twf/

所以基本上我需要的是，如果我在桌面模式下，即使我按下组合按钮，它也总是在悬停时显示子菜单，而在移动设备中，只有当我按下按钮时。现在我想这可以用 js 中的简单代码解决，但我对 js 一无所知，所以任何帮助将不胜感激。

Answer 1

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

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

所以在样式中添加 !important 是这样的:

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;
    }
}