surprise, surprise, IE 6 isn't doing what it should be.

I have a custom animated drop down menu that works great in FF and
IE7, but IE6 doesn't even start to animate anything. Live example can
be found at: <a href="http://client.grcmc.org/wip/rerc/
index.php">http://client.grcmc.org/wip/rerc/index.php</a>

JS:
[code]
$("#nav li:has(ul)").hover(
                                function(){
                                        var ul = $(this).children("ul");

                                        if(ul.is(":animated")){
                                                ul.stop()
                                                   
.css('top','100%').css('opacity','1')
                                                   .slideDown("fast");
                                        }
                                        else{
                                                ul.css("display", "none")
                                                ul.slideDown("fast");
                                        }
                                },
                                function(){
                                        var ul = $(this).children("ul");

                                        if(ul.is(":animated")){
                                          ul.stop()
                                                .css('top','100%')
                                                .animate(
                                                        {top:100, 
opacity:'hide'},
                                                        "slow",
                                                        "easeOutExpo",
                                                        function(){
                                                                
ul.css('top','100%')
                                                                
.css('height','auto');
                                                        }
                                                );
                                        }
                                        else{
                                         ul.animate(
                                                {top:100, opacity:'hide'},
                                                "slow",
                                                "easeOutExpo",
                                                function(){
                                                        ul.css('top','100%')
                                                        .css('height','auto');
                                                });
                                        }

                                }
                        );
[/code]

HTML
[code]
<ul id="nav">
        <li id="nav_about_us"><a class="top_level" href="about_us.php"
title="About Us">About Us</a>
                <ul>
                        <li><a href="staff.php" title="Staff">Staff</a></li>
                        <li><a href="board.php" title="Board of 
Directors">Board of
Directors</a></li>
                        <li><a href="speakers_list.php" title="Speakers 
List">Speakers
List</a></li>
                        <li><a href="funding.php" title="Our Funding">Our 
Funding</a></li>
                </ul>
        </li>

        ...

        <li id="nav_contact_us"><a class="top_level" href="contact.php"
title="Contact Us">Contact Us</a></li>
</ul>
[/code]

Any ideas?

Reply via email to