I need a litte help

I need a litte help

So I have this HTML here

  1. <!-- navigation -->
                <ul id="nav">
                    <li><a href="#">link #1</a></li>
                    <li><a href="#">link #2</a>
                        <ul>
                            <li><a href="#">sublink #2 - 1</a></li>
                            <li><a href="#">sublink #2 - 2</a></li>
                        </ul>
                    </li>
                </ul>









and the idea is that I want to be able to hover over the link 2 there and have its ul list drop down, now here is my js for that


  1.     $("#nav li").has("ul").hover(function() {
            $(this).addClass("current").children("ul").fadeIn();
        }, function() {
            $(this).removeClass("current").children("ul").stop(true, true).css("display", "none");
        });




this does work and when i hover over the little link 2 the it's sublist shows up nicely however when i go to move my mouse over it, it disappears! help! please!