[JS/CSS] Hover menu

[Dj_Jestar]

[JS/CSS] Hover/Drop menu

"meh" is all I can say about these PITA's..

I've got two simple JS functions:

function ShowHover(id) {
    var elem = document.getElementById(id);
    elem.style.display = 'block';
}
function HideHover(id) {
    var elem = document.getElementById(id);
    elem.style.display = 'none';
}

Then I have the menu block..

<div class="menu">
  <ul class="menu">
    <li class="menu">home</li>
    <li class="menu">about us</li>
    <li class="menu" onmouseover="ShowHover('hoverMenu')">products and services</li>
    <li class="menu">contact us</li>
  </ul>
</div>

<!-- the hover menu.. -->
<div id="hoverMenu" style="display: none;" onmouseout="HideHover('hoverMenu')">
  <ul class="hoverMenu">
    <li class="hoverMenu">insight</li>
    <li class="hoverMenu">research</li>
    <li class="hoverMenu">consultancy</li>
  </ul>
</div>

as you can see, the desired effect is for the <li> with "products and services" to display the hover menu upon mouseover, and then hide it again onmouseout of the actual hover menu. I've positioned the hoverMenu to be right below the item, but it hides again as soon as the cursor touches it..

Any pointers?

Ta.

 

[Dj_Jestar]

Aha! Of course.

Thanks