jquery - 悬停按钮上的菜单

Question

我正在尝试为 WordPress 主题制作菜单，但我遇到了一些麻烦。

我希望菜单隐藏起来，只有当我们将鼠标悬停在按钮上时才显示。菜单是同级 div 的子项，如下所示:

<div id="menuicon>MENU ICON HERE</div>

<nav id="site-navigation">
    <div class="menu">
    </div>
</nav>

我如何使用 CSS 来制作它，以便当我将鼠标悬停在 #menuicon 上时，.menu 会出现。当我们不再位于 .menu 或 #menuicon 上时再次消失？

我已经尝试了几件事，但我似乎没有到达那里。现在我是这样的:

.menu{
    visibility: hidden;
}
#menuicon:hover .menu{
visibility: visible;
}

我想我需要能够从悬停在 #menuicon 上的 #site-navigation 中选择子级 .menu .这是正确的想法吗？这是我可以用 CSS 做的事情还是我需要使用 jQuery？

Answer 1

1. HTML 无效
2. 没有不可见这样的东西，它是隐藏。
3. 您可以更改标记或使用相邻同级选择器 (+) 或通用同级选择器 (~)(如果 CSS3 可以)

-

.menu {
    visibility: hidden;
}
#menuicon:hover ~ #site-navigation .menu {
    visibility: visible;
}

FIDDLE

或将标记更改为

<div id="menuicon">MENU ICON HERE
    <nav id="site-navigation">
        <div class="menu">dsadsds
        </div>
    </nav>
</div>

FIDDLE