Simple Jquery Suckerfish not working

JavaScript
1

Hello. I’ve used jquery before to animate a suckerfish menu. This time however, It’s set up a little different and therefore not working. Usually what scrolls down is a whole list <ul>. The nav structure in this one is just attempting to slide down three list items <li>. The problem I’m having is when you rollover the main link, only one of the list items is being captured. My jquery selection need to include all three <li> tags.

http://www.savagepixels.com/iselect/

Here’s my markup:


<div class="threeNavStructure inside"><!-- begin threeNavStructure div -->
    <a href="index.html">
    <div class="threeNav_pos1_on inside">
        <ul class="homeNav"><li>Home</li></ul>
    </div></a>
    <div class="threeNav_pos2_off inside">
         <ul id="menu" class="aboutNav"><a href="#"><p>About The Fund</p></a>
            <li><a href="how.html">how it works</a></li>
            <li><a href="vetting.html">expert vetting</a></li>
            <li><a href="management.html">management</a></li>
        </ul>
    </div>
    <a href="faq.html">
    <div class="threeNav_pos3_off inside">
         <ul class="faqNav"><li>FAQ</li></ul>
    </div></a>
</div><!-- close threeNavStructure -->

The Jquery:

// suckerfish functionality
$('#menu li').css({
        display: "none",
        left: "auto"
    });
    $('#menu').hover(function() {
        $(this)
            .find('li')
            .stop(true, true)
            .delay(400)
            .slideDown('slow');
    }, function() {
        $(this)
            .find('li')
            .stop(true,true)
            .fadeOut('slow');
});

And last but not least, my relevant CSS:


#menu { position:relative; width:100%; }
#menu p { font-family: 'Arvo', serif; font-size:16px; font-weight:bold; text-transform:uppercase; }
#menu, {
    list-style:none;
}
#menu li {
    height:32px;
    float:left;
    text-align:left;
    padding:0px 2px 0px 10px;
    background-color:#252525;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    position:absolute;
    display:block;
    left:-9999em;
    z-index:999;
    width:250px;
    
}
#menu li a {
    color:#fff;
}
#menu a {
    display:block;
    text-decoration:none;
}
#menu li:hover, {
    left:auto;
}

I’d just like it to scroll down all the of my list items when you rollover the anchor “About The Fund”

Thanks!
| scott

2

Well, I’m getting closer

http://www.savagepixels.com/iselect/

Now the problem is, for some reason, the <ul> that slides down waits until it’s finishes sliding before it expands to it’s correct size. Any idea what’s causing that?

Thanks
| sc

3 
$('#menu').hover(function() {
    $(this)
        .find('li')
        .stop(true, true)
        .slideDown('slow');
}, function() {
    $(this)
        .find('li')
        .stop(true,true)
        .fadeOut('slow');

});

This should work for you.

4

This is a year old thread, no need to revive an old topic.

This topic is now closed. New replies are no longer allowed.