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="php/jquery.tools.min.js"></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="http://google.com/";>Google</a></li>
<li><a href="http://yahoo.com/";>Yahoo</a></li>
<li><a href="http://live.com/";>Live
Search</a></li>
</ul>
</li>
<li class="topnav">
<a href="http://shopping.com";>Shopping</a>
<ul>
<li><a href="http://amazon.com/";>Amazon</a></li>
<li><a href="http://ebay.com/";>eBay</a></li>
<li><a
href="http://craigslist.com/";>CraigsList</a></li>
</ul>
</li>
</ul>
</body>
</html>
