Question

I’m having troubles with jQuery animation running twice on my navigation bar. Mouse over once causes it to fly down then back up. It won’t stay visible. Mousing over twice gives the right effect. Here is how the Nav is set up:

<div id="nav">
<ul>
  <li><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul>
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
...
</ul>

SCRIPT:

<script type="text/javascript">
$('body').ready(function() {
$('li').hover(function() {
$(this).find('li').slideToggle(); 
});
});
</script>

Answer 1

Try this in JSFiddle

HTML

<div id="nav" style="width:200px">
<ul style="border:1px solid red">
  <li class="topMenuItem"><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul style="display:none">
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
</ul>
</div>

JavaScript
​

$(document).ready(function(){
    $('.topMenuItem').mouseenter(function() {
        $(this).find('ul').slideDown();
    });

    $('.topMenuItem').mouseleave(function(){
        $(this).find('ul').slideUp();
    });
​});