[jQuery] custom animated drop-down menu and IE6
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?