Menu on Button Hover

Question

I am trying to make a menu for a WordPress theme but I'm having some trouble.

I would like the menu to be hidden and show only when we hover the button. The menu is a child of a sibling div, something like this:

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

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

How can I use CSS to make it so that when I hover the #menuicon the .menu would show up. And again disappear when we are not anymore over the .menu nor the #menuicon?

I have tried several things, but I don't seem to get there. Now I have it like this:

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

I think I would need to be able to select the child .menu of sibling #site-navigation from our hover on #menuicon. Is this correct thinking? Is this something I can do with CSS or do I need to use jQuery?

Answer 1

1. The HTML is invalid
2. There's not such thing as invisible, it's hidden.
3. You can either change the markup or use the adjacent sibling selector (+) or the general sibling selector (~) if CSS3 is OK

-

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

FIDDLE

or change the markup to

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

FIDDLE