响应式菜单:悬停子菜单上显示错误 [英] 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;
}

因此将 !important 添加到样式中，如下所示:

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屋！