title: HTML – Show menu on hover
body: <p>I want to show a menu when the navigation item is hovered. According to my design, the menu is absolute positioned. I'm using Google Chrome. When I hover over the menu, the menu disappears. How can I achieve my goal?</p>
  
  <p><a href="http://jsfiddle.net/Nn7Q7/1/" rel="nofollow"><code>JSFiddle</code></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="hoverzone"&gt; hover here 
  
    &lt;ul class="menu"&gt;
  &lt;li&gt; home &lt;/li&gt;
  &lt;li&gt; works &lt;/li&gt;
  &lt;li&gt; contact &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu{
  position: absolute;
  top: 33px;
  display: none;
  }
  
  .hoverzone{
  position: relative;
  }
  
  .hoverzone:hover .menu{
      display: block;
  }
  </code></pre>