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

i have code this

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

but want 'mainlink2' has submenu, don't want place child because when set submenu 'absolute' can't fit width screen , center create div outside 'ul' ...

 <div>   <ul id="submenu">    <li>sub1</li>    <li>sub2</li>    <li>sub3</li>   </ul>  </div> 

when call javascript .hover can't see submenu. try add class "submenu" remember index of mainmenu , when match add class show submenu, when not hover remove class. hover function can't when leave mouse main menu submenu 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);     });  });