jquery dropdown menu

Question

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("ul.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>

• Laurence Burke: I think that you are selecting the parent of the ul nav which is sliding all of the sub navs to slide down this.slidetoggle()

Answer 1

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>

• Jim Rubenstein: Didn't' see your comment \: Can't mark comments as accepted answers, so this question would never get "closed" without an answer \:
• Laurence Burke: no no agreed I wasnt sure about my answer so I commented I am glad that you answered it. I just didn't want to put a half answer in the "answer"