jquery hover can't find parent span

I'm sure that this has been covered, but there are so many jquery parent questions that sifting through them is a pretty daunting task.

I have a page with an u开发者_StackOverflow社区nordered menu dropdown list like this:

  <ul class="topnav">
    <span><li><a href="firstitem.php">Contact</a>
        <ul class="subnav">
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="testlink.php">Test Link</a></li>
        </ul>
    </li></span>

    <span><li><a href="seconditem.php">Ministries</a>
      <ul class="subnav">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
      </ul>
    </li></span>
</ul>

Currently, my jquery references this as such:

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
});

The drop down works, but I can't find the span I am looking for so currently it never slides up. Any help would be appreciated. Thanks

Also, I'd like to do this without adding individual tag id's. yes it would be easier, but I'm getting this code from someone else and I'd like to keep it similar.

There are a few issues here.

1. Don't put an <li> in a <span>. It breaks html validation rules and can cause issues.

2. The reason slideup does not work is because it is in a new function, meaning the scope of this has changed.

Code

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        var $ul = $(this).parent().find("ul.subnav");
        $ul.slideDown('fast');
        $(this).parent().parent("span").hover(function() {
        //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $ul.slideUp('medium');
        });
    });
});

This should work better for you.

Use parents(selector) instead of parent().

In this case $(this).parent() is the li element, $(this).parent().parenT() is the ul class="subnav" element and $(this).parent().parent().parent() is the span tag.

The code is working, except on page load (meaning once you mouseover it, it starts to work). You should be able to do:

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
    $("ul.subnav").slideUp('medium'); // <-- Note here, but you probably want to hide or something
});

http://jsfiddle.net/SvDAw/

Note, this was in FF4.

NOTE

I didn't comment on the incorrect use of a SPAN within a UL; this is probably not a good thing to do, as other note, since it's not valid (you should use LI's and OL/UL's within UL/OL's). So you might consider reordering your markup to either use classes on the LI's for each level, or embed some UL's within your parent UL (I like the first better).