Passing focus to sibling element

Passing focus to sibling element

Hi there. I have an issue that I can't seem to solve.
I have a html structure like so:

  1. <div id="linksDiv">
  2.       <a id="myLink">This is a link</a>
  3. </div>
  4. <div id="hoverDiv" style="display:none;">
  5.       <p>This is some content</p>
  6. </div>
I have some jquery code that will show "hoverDiv" when you hover over the anchor "myLink".
This issue is that I then want to be able to hover over the sibling div "hoverDiv" which is positioned absolutely just below "linksDiv" (they are both touching). But what happens is, as soon as I move from the anchor "myLink" to "hoverDiv", it disappears. I only want "hoverDiv" to disappear if either I move focus off "myLink" and not onto "hoverDiv" (after it appears) or if I hover off "hoverDiv" after it has been displayed (similar to the way this menu functions http://bramasol.slavix.com/bramasol-solutions/)

Has anyone any suggestions on how I could tackle this? I'm not in a position to place "hoverDiv" into the anchor "myLink". I'm really stuck and would appreciate some suggestions or simple examples on how I could tackle this.

What I currently have is this:

  1. $(document).ready(function() {
  2.       $('a#myLink').hover(function() {
  3.             $('div#hoverDiv').css('display','block').css('position','absolute').css('top','50px'); 
  4.             $('div#hoverDiv').mouseenter(function() {
  5.                   alert('Mouse over hoverDiv');
                });  

  6.             $('div#hoverDiv').mouseleave(function() {
  7.                   alert('Moused off hoverDiv');
                });
          },function() {

  8.             $('div#hoverDiv').css('display','none');
  9.       });
  10. });
Many thanks indeed for any help,

Regards