title: Menu on Button Hover
body: <p>I am trying to make a menu for a WordPress theme but I'm having some trouble.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="menuicon&gt;MENU ICON HERE&lt;/div&gt;
  
  &lt;nav id="site-navigation"&gt;
      &lt;div class="menu"&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>How can I use CSS to make it so that when I hover the #menuicon the <code>.menu</code> would show up. And again disappear when we are not anymore over the <code>.menu</code> nor the <code>#menuicon</code>?</p>
  
  <p>I have tried several things, but I don't seem to get there. Now I have it like this:</p>
  
  <pre><code>.menu{
      visibility: hidden;
  }
  #menuicon:hover .menu{
  visibility: visible;
  }
  </code></pre>
  
  <p>I think I would need to be able to select the child <code>.menu</code> of sibling <code>#site-navigation</code> from our hover on <code>#menuicon</code>. Is this correct thinking?
  Is this something I can do with CSS or do I need to use jQuery?</p>