jQuery dropdown navigation

I am using simple jQuery code to make drop down navigation, but its not giving expected results...

jquery code

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).slideDown(100);
        }, function () {
            $('ul', this).slideUp(100);     
        });
});

html code

<ul class="nav radius clearfix">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Projects</a>
        <ul class="radius">
            <li><a href="#">Recent Projects</a></li>
            <li><a href="#">Archive Projects</a></li>
            <li><a href="#">New Project</a></li>
        </ul>
     </li>
     <li><a href="#">Messages</a></li>
</ul>

Please ch开发者_运维技巧eck and let me know what's I am missing. thanks.

---

Edit: to address the animation "flickering issue" in addition to starting in a closed state, you can use the following (check it on jsfiddle here). It's not very elegant but this issue arises from the way some browsers handle the change in size of the elements involved, and this does resolve that:

$(function() {
    $('.nav li').hover(function () {

        $('ul:not(:animated)', this).slideDown(100);
        }, function () {
            $('ul:not(:animated)', this).slideUp(100);     
        });
    $('.nav li ul').slideUp(0);
});

---

Try this -- it adds a delay to keep the "flickering" you're sometimes experiencing.

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).delay(50).stop().slideDown(100);
        }, function () {
            $('ul', this).delay(50).stop().slideUp(100);     
        });
});