Laughingdoll
New Member
I have a small problem with sliding in jquery. On hover (Mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.\[code\]<ul class="nav nav-tabs nav-stacked"> <li id = "mousehover"> <a style="background-color:#f78144; color: #000; text-align: center;" href="http://stackoverflow.com/questions/14065186/#">Time Table </a> </li></ul><div id = "hovercontent"> Contents 1 </div><script type = "text/javascript"> $(document).ready(function(){ $("#mousehover").mouseenter(function(){ $("#hovercontent").slideDown("slow"); });$("#hovercontent").mouseleave(function(){ $(this).slideUp("slow"); }); });</script>\[/code\]Here the problem is when i hover on the list the div slides down, but only after i hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if i mouse out of the list with out entering the div. How can this be done?