I've got a custom header / nav where I have two elements that represent two sections of a website. I want to be able to hover over one of the elements and display a particular menu. However the Menu list isn't a child of the element. So I can't do it with CSS.

The problem i'm having is when I hover over the element, the menu shows. But I move my mouse to hover over the menu and and as soon as move away from the element the menu disappears. I have tried adding a `display:block` to the manu items, with a `.delay()` method running but there is still a slight flicker when moving the mouse away from the div.

Here is my current code:

//HTML

```
<header>

    <a class='hoverOverOne'>Hover over me to show menu</a>
    <a class='hoverOverTwo'>Hover over me to show menu</a>

    <nav>

<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>

</ul>

<ul id='menuToShow-Two'>
    <li>testing</li>
    <li>testing</li>
</ul>

</nav>
</header>

```

// jQuery 

```
jQuery("a.hoverOverOne").hover(
      function () {
         jQuery('#menuToShow-One').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-One').slideUp('medium').delay(500);
    });

    jQuery("a.country").hover(
      function () {
         jQuery('#menuToShow-Two').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-Two').slideUp('medium').delay(500);
    });

```

// CSS

```
#menuToShow-One{
display:none;
}

#menuToShow-Two{
display:none;
}

```

Any help would be much appreciated.

Thanks.