Trying to make a onmouseover javascript drop down menu

Effect I want . Basically I want to popup a simple menu when the user mouseovers a link . I tried several ready made scripts , but had trouble integrating them with my site.开发者_开发百科 SO decided to built my own. here is what I am trying to do:

   <li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation"  href="show_delhi_items.php">Menu heading</a></li>

 function showlist1() //onmouseover
  {
     
      document.getElementById('list1').style.visibility='visible' ;
     
  }
  function hidelist1() //onmouseout
  {
      if (menu elements don't have focus)
      {
      document.getElementById('list1').style.visibility='hidden' ;
      }
  }
  

now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link

hope I was clear enough.

Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:

position: absolute;
top: some-y-value;
left: some-x-value;

Hmm now I made that comment i better back it up with an actual way of doing it :)

Go here and read all about suckerfish dropdowns

Go here to see an example implementation