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); }); });
Comments
Post a Comment