按钮悬停上的菜单

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

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

Answer 1

1. HTML无效
2. 不是invisible，而是hidden。
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