jquery dropdown menu

how can i change this code so that the menu drops down when the ("ul.topnav li") is hovered and not the <span>. when i changed the code all the ("ul.subnav) dropped when hovered over.

thanks,

<script language="javascript"  type="text/javascript">
    $(document).ready(function() {

       $("ul.subnav").parent().append("<span></span>");

       //When trigger is clicked...
       $("ul.topnav li span").mouseenter(function() { 

            //Following events are applied to the subnav itself 
            //(moving subnav up and down)

            //Drop down the subnav on click
            $(this).parent().find("u开发者_运维百科l.subnav").slideDown('fast').show(); 

            $(this).parent().hover(function() {
            }, function() {
                //When the mouse hovers out of the subnav, move it back up
                $(this).parent().find("ul.subnav").slideUp('slow'); 
            });

        //Following events are applied to the trigger 

        }).hover(function() { //(Hover events for the trigger)

            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function() { //On Hover Out

            //On hover out, remove class "subhover"
            $(this).removeClass("subhover"); 
        });

    });


</script>

---

When you change the .mouseenter() event attachment to the li, it changes the scope of everything inside the function. Fortunately, all the code within just tries to get back up to the parent li of the span it was originally targeting. So, to fix this. you just remove the calls to parent() where appropriate.

<script language="javascript"  type="text/javascript">
    $(document).ready(function() {

       $("ul.subnav").parent().append("<span></span>");

       //When trigger is clicked...
       $("ul.topnav li").mouseenter(function() { 

            //Following events are applied to the subnav itself 
            //(moving subnav up and down)

            //Drop down the subnav on click
            $(this).find("ul.subnav").slideDown('fast').show(); 

            $(this).parent().hover(function() {},
            function() {
                //When the mouse hovers out of the subnav, move it back up
                $(this).find("ul.subnav").slideUp('slow'); 
            });

        //Following events are applied to the trigger 

        }).hover(function() { //(Hover events for the trigger)

            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function() { //On Hover Out

            //On hover out, remove class "subhover"
            $(this).removeClass("subhover"); 
        });

    });
</script>