按钮上的菜单

Question

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

我希望菜单是隐藏的，只有当我们悬停按钮时才会显示。该菜单是兄弟级div的子程序，如下所示：

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

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

我如何使用CSS来制作它，以便当我悬停#菜单图标时，.menu就会出现。当我们不再在.menu或#menuicon上的时候又消失了

我试过几件事，但似乎没有达到目的。现在我有了这样的感觉：

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

我想我需要能够从我们在.menu上的悬停中选择兄弟姐妹的子#site-navigation。这个想法正确吗？这是我可以用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