HTML – Show menu on hover

Question

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?

JSFiddle

HTML:

<div class="hoverzone"> hover here 

  <ul class="menu">
<li> home </li>
<li> works </li>
<li> contact </li>
</ul>

</div>

CSS:

.menu{
position: absolute;
top: 33px;
display: none;
}

.hoverzone{
position: relative;
}

.hoverzone:hover .menu{
    display: block;
}

Answer 1

Because you have positioned .menu absolutely, it takes up no space within .hoverzone, therefore .hoverzone's height won't expand for .menu and the :hover state is not activated when hovered over your menu.

One way of overcoming this is not to position it absolutely, but relatively instead:

.menu{
    position: relative;
    top: 33px;
    display: none;
}

JSFiddle