Menu on Button Hover

2 Views

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:

Read More
<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?

Post Views: 2

Related posts

Leave a Reply

1 comment

    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