worked fine for me in IE7 and FF3
Xenongasman wrote:
So I got a bit of a issue. I have a working dropdown menu animated on
hover with slideDown and slideUp. But the problem is if I move off and
on the menu quickly it will repeat the slideDown/Up effect. So I
thought I would add stop() right before slideDown/Up and that breaks
it. It'll work for the first couple times but then it starts cutting
the menu off. Its really weird. Does anyone have a suggestion? Here is
the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Dropdown</title>
<script type="text/_javascript_" src=""></script>
<style type="text/css">
/* General */
* { padding: 0; margin: 0; }
body { font-family: verdana, arial, sans-serif; font-size: small;
background-color: black; }
#menu, #menu ul { list-style: none; }
#menu {margin:10px;}
/* Head links */
#menu li.topnav { width: 150px; float: left; margin-left: -1px;
border: 1px black solid; background-color: #e9e9e9; text-align:
center; }
#menu li.topnav a { display: block; padding: 15px; }
/* Child lists and links */
#menu li.topnav ul { display: none; border-top: 1px black solid; text-
align: left; }
#menu li.topnav:hover ul { display: block; }
#menu li.topnav ul li a { padding: 5px; height: 17px; }
#menu ul.topnav li a:hover {background-color: #333; }
</style>
<script language="_javascript_">
$(function(){
$('#menu li').hover(
function() {
$(this).find('ul:first').css({display:"none"}).slideDown();
},
function(){
$(this).find('ul:first').slideUp('slow');
});
});
</script>
</head>
<body>
<ul id="menu">
<li class="topnav">
<a href="">Search Engines</a>
<ul>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://google.com/">"http://google.com/">Google</a></li>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://yahoo.com/">"http://yahoo.com/">Yahoo</a></li>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://live.com/">"http://live.com/">Live Search</a></li>
</ul>
</li>
<li class="topnav">
<a href="" class="moz-txt-link-rfc2396E" href="http://shopping.com">"http://shopping.com">Shopping</a>
<ul>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://amazon.com/">"http://amazon.com/">Amazon</a></li>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://ebay.com/">"http://ebay.com/">eBay</a></li>
<li><a href="" class="moz-txt-link-rfc2396E" href="http://craigslist.com/">"http://craigslist.com/">CraigsList</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
