Need help with animated drop down menu with graceful degradation

CSS based drop down menu with a touch of Jquery

[hybridcoder]

I'm working on adding a little animated effect to a drop down menu I have. The menu is all CSS based and works great in all modern browsers, even IE 6. I like it alot and tried adding some jquery to it to get the drop downs to animate out when a user mouses over a top level link. This works fine, but I am having a time trying to figure out how to get the drop down menu to collapse when the leave the li that the drop down menu is nested in.

I can get it to work if I set it so when the user mouses over the top level link it opens, and when they mouse out of the top level link, it closes, yet this would never allow them to mouse down to the links in the drop down. So this is why I am trying to make the mouse out trigger on the li that contains the top level link and the nested drop down, yet for some reason it's not working.

Below is an example of the HTML code I'm working with.

<div class="menu">

<ul>
<!-- Below is the li I am trying to use as my trigger for mouse events -->
<li>
<!-- Below is the top level link -->
<a class="hide tab-one" href="overview.php">DEMOS</a>

<!-- This is for IE 6, you can disregard -->
<!--[if lte IE 6]>
<a href="overview.php" class="tab-one">DEMOS
<table><tr><td>
<![endif]-->
<!-- END IE 6 CODE -->


<!-- Here is the nested ul -->
<ul id="dropdown-one">
<li><a href="page.php" >Page 1</a></li>
<li><a href="page.php" >Page 2</a></li>
</ul>

<!-- This is for IE 6, you can disregard-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
<!-- END IE 6 CODE -->

</li>
</ul>

Here is an example of the CSS code I'm using.

.menu {
font-family: arial, sans-serif; 
position:relative; 
z-index:100;
height:42px; /* Same as Top Nav Links */
}

.menu ul {
padding:0;
margin:0; 
list-style: none;
}

.menu ul li {
padding:0px;
margin:0px;
float:left; 
position:relative;
}

.menu ul li ul {
display:none; 
}

.menu ul li ul.active {
display:block; 
position:absolute; 
top:42px; /* Same height as Top Nav Links */ 
left:0;
}

.menu ul li:hover ul li ul {
display: none;
} 



/* Top Nav Links */
.menu ul li a, .menu ul li a:visited {
background:url(../assets/dd-navtop.jpg) repeat-x;
color:#fff;
display:block;
font-size:11px;
height:42px; 
line-height:42px;
overflow:hidden;
text-align:center;
text-decoration:none;
}

/* Top Nav Links Hover */
.menu ul li:hover a {
background:url(../assets/dd-navtop.jpg) repeat-x;
background-position:0px -42px;
color:#333; 
}


/* Styles Y offset for drop downs */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:42px; /* Same height as Top Nav Links */ 
left:0;
}



/* Drop Down Tab */
.menu ul li:hover ul li a { 
display:block; 
background:#00f; 
color:#FFF;
height:30px;
line-height:30px;
}


/* Drop Down Tab Hover */
.menu ul li:hover ul li a:hover { 
background:#EEE; 
color:#666;
}

I'm fairly new with Jquery so I've been piecing some things together. Here is what I have so far.

<script type="text/javascript">
$(document).ready(function()
{

 //adds class to the nested UL so it is not hidden anymore

 $(".menu ul li ul").addClass('active');
 //hides the nested UL until it is opened with the slide open
 $(".menu ul li ul.active").hide();
 

  //opens the drop down when top link is moused over
  $(".menu ul li a").mouseover(function()
 {
  $(this).next(".menu ul li ul.active").slideDown(200);
 });
 
 // here is where I am having the issues. this should slide up the drop down when they mouse out of the li that holds the top nav and nested ul but i can get this to work.

 $(".menu ul li").mouseout(function()
 {
  $(this).next(".menu ul li ul.active").slideUp(200);
 });
 
 
});
</script>

Any help on this would be greatly appreciated! Thanks!

[whoisgregg]

Welcome to WebmasterWorld, hybridcoder!

What does happen with that mouseout code? Anything? Any errors thrown?

I would add an alert in there to see precisely which object is getting the mouseout event:

alert($(this));

I suspect you've got an issue where the mouseout isn't occuring on the element you think it's occuring on...I'd also test in multiple browsers to see if they report a different element for the mouseout.