CSS JS Dropdown menu: Extend the hover area beyond the image link

Question

I'm trying to replicate the navigation as seen in www.accenture.com

And this is what I've been able to achieve so far: http://alfadesigntech.com/new/pages/inside-page-template.html

I've used a java script to show/hide a drop-down menu which is actually a hidden div with more links. The problem is as soon as I leave the menu button, the drop-down menu hides again. While I can use a delay onmouseout, it is not the solution i'm looking for.

Possible solution as per my limited knowledge, is to somehow extend the hover area to cover the hidden box. How can I achieve this? Is there an alternate solution?

Any help will be hugely appreciated.. Thanks in advance..

Ps. I've a limited knowledge of javascripts.

Answer 1

you can place your div with links in one container with its triggering anchor - it should help.

 <div id="menu-item-1" onmouseover=....>
   <img/>
   <div class="links">Show us on mouseover and hide on mouseout</div>
 </div>

Although it often depends on particular markup.

Also possible solution - when links panel is open - you hide it if mouse out of it and mouse not over on anchor image.