I'm kind of tired with Javascript long script for animation and decide to try jQuery, but it seems I'm stuck even at the simplest code.

CSS:

#menu {float: right; font: italic 16px/16px Verdana, Geneva, sans-serif;}
  ul#nav {list-style: none;}
  ul#nav li {float: left; padding-right: 10px;}
  ul#nav li a {color: white;}
  ul#subnav {float: right; list-style: none; padding: 0; display: none;}
  ul#subnav li {float: left; padding: 10px 5px; white-space: nowrap;}
  ul#subnav li a {color: white;}

Script:

$(document).ready(function() { 
  $('.nav').hover(function() {
    $(this).find('#subnav').stop().animate({width:'toggle'},350);
  });
});

HTML:

<div id="menu">
  <ul id="nav">
    <li class="nav">
      <a href="#"><img src="images/icon-home.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Home</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-signin.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Sign In</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-register.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Create Account</a></li>
      </ul>
    </li>
    <li class="nav" style="padding-right: 0;">
      <a href="#"><img src="images/icon-mail.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li style="padding-right: 0;"><a href="#">Contact Us</a></li>
      </ul>
    </li>
  </ul>
</div>

Here's the sample page: http://v1n-vampire.com/dev/jq-animation-stuck

If you continue to hover on the nav from left to right then back to left, eventually the animation will stuck. How to solve this? Thank you in advance.