Need help with adding jQuery to a "fat" drop down menu

JavaScript
1

Hi there - I’m using a version of this drop down menu: http://lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html

On its own it works great, but we’d like to add a little animation to it. Specifically, when hovering over the main links, the sub UL should slide down, and when hovering out, should slide up. (Ideally it would slide up after x seconds of no mouse movement but that’s optional.)

I have a version of this just starting to work. Can’t post the dev URL unfortunately, but the navigation HTML/CSS is almost identical. And here’s the jQuery I have so far (which I’m sure is wrong in several places :blush:):

$(function() {
	$('li.toplevel').mouseenter(function(){
		$("li.toplevel ul").show();
		$(this).children('ul').stop(true, true).slideDown('normal');
		});
	
	$('li.toplevel').mouseleave(function(){
		$(this).children('ul').stop(true, true).slideUp('slow');
		});
		
	});

Now, I don’t get the slideDown effect on first/initial hover. On the second and subsequent ones, it works until I refresh the page. Slide down doesn’t work at all.

I’m sure I’m doing plenty wrong - still getting the hang of jQuery and JavaScript in general. Any help would be great. :smiley:

Thanks!
.a