Jquery effects don't activate until after I mouse over once

[brainbuzzmedia]

Hi guys

I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added:

<script type="text/javascript">
$(document).ready(function () {	
	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here.

Any ideas on how I can fix this?

[azoomer]

I am thinking you could try something like this

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

$('ul.dropdown ul').css('display', 'none');

	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

It seems that you have to have the element as display none in order to get the slide down effect.
I'm not sure if it works but you can try it out.

[brainbuzzmedia]

Ah! That does work. But now I noticed another problem. The slide down works now, but it instantly disappears when you mouse off, instead of sliding up (slower than it slides down).

Sorry, I know very little about jquery / javascript.

[azoomer]

Yeah that's true about the sudden disappearance , maybe it wasn't such a clever fix after all, sorry !

[brainbuzzmedia]

Better than before. Any idea on how I could remove the drop down delay from the second level ul? Like "Products" should have a delay but then "New" and "Used" should just pop open instantly.

[brainbuzzmedia]

Anyone else have any idea?

[azoomer]

Hi brainbuzzmedia, I've been trying to find a solution to the slideUp problem, but it's more difficult than i thought. Also I haven't been able to figure out how to remove the slide effect from the second ul level, as you request. Did you come up with solutions to this yet ?
There is a menu on DD that slides up again:
http://www.dynamicdrive.com/dynamici...smoothmenu.htm
and that looks very nice.
What I like about your menu is that it still works if javascript is disabled. I use the superfish menu a lot and it also degrades well, but it suffers from the same problem as your menu, not having a slideUp effect. I have not seen any solution to that yet, even though I have googled it for quite a while. I was thinking of trying to construct a menu from scratch, but it is just too confusing with all the li, ul and so on, let alone the browser differences. If anybody, knows of a menu that slides up again and still degrades well with javascript disabled I'd love to hear about it.

[brainbuzzmedia]

Thanks for looking into it more for me. I haven't found a solution to it yet but I did actually try that smooth dropdown menu you linked on DD. The problem I had with that was that it didn't work well with the cufon font replacement on the same page.