响应菜单：悬停子菜单显示错误 [英] Responsive menu: on hover submenu shows error

问题描述

大故事：我从教程创建了一个响应菜单。菜单应该显示子菜单，当你悬停在投资组合按钮，当在移动模式下，你需要按下按钮显示子菜单（工作正常）。问题是教程有一个错误：如果你在桌面模式下按投资组合按钮，子菜单将不会再显示，除非你按（点击）按钮，如在移动模式。

Big story short: I created a responsive menu from a tutorial. The menu is supposed to show the submenu when you hover on portfolio button, and when on mobile mode you need to press the button to show the submenu (that works fine). The problem is that the tutorial had a error: if you press the portfolio button in desktop mode the submenu will not show again unless you press (click) the button, like in mobile mode.

以下是即时示例： http://armandorodriguez.pe/info

我试图写这里的代码，但不明白的说明，所以这里是jsfiddle：jsfiddle.net/x44w1twf /

Here's the live example: http://armandorodriguez.pe/info
I tried to write the code here but didn't understand the instructions, so here's the jsfiddle: jsfiddle.net/x44w1twf/

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

So basically what i need is that if I'm on desktop mode it always shows the submenu on hover, even if I press the portfolio button, and in mobile only when i press the button. Now I suppose this can be solved with a simple code in js, but I don't know nothing of js, so any help will be appreciated.

推荐答案

很简单，当你点击元素隐藏它，设置样式inline display：none 并覆盖样式：

The thin is that when you click on the element to hide it that set the style inline display: none and that overwrite the style:

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

$ b

So add !important to the style like this:

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

这里有一个工作的jsfiddle示例

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

For the normal behavior in mobile just add the style inside a media like this:

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

这篇关于响应菜单：悬停子菜单显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！