Hover won't work when show/hide non-parent&child element

I have a code like this

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

but i want the 'mainlink2' has a submenu, I don't want to place it like child because when i set the submenu to be 'absolute' i can't fit its width to the screen and be the center so i create a div outside the 'ul' like this ...

开发者_如何学JAVA <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

when i call javascript .hover i can't see the submenu. i try to add a class to "submenu" by remember the index of mainmenu and when it match i add class to show the submenu, when not hover i remove class. But the hover function can't do this when i leave a mouse from main menu the submenu is hide.

Try this:

HTML:

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>

<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

JQUERY:

$(function(){

    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });

});