simple jquery dropdown menu

Question

I need help with jquery. Sorry for my bad english, but i think, that you can understand me.

I have got menu, where on mouse over i must show submenu, and when mouse out this menu i must hide. Here is link: http://butteff.ru/site/menu.htm But i don't know how to do it with this:

1. when I hover on "quadro" - show dropdown
2. when I mouse out from quadro - it must hide
3. when I mouse out from submenu - it must hide
4. When i mouseout from "quadro" to submenu - it is might not hide

I tryed to do it ( http://butteff.ru/site/menu.htm ) but it is not work. Where is my problem? Can you help me?

Answer 1

you have an error $(".dropdown").mouseOut is not a function

try mouseout instead of mouseOut

• butteff: butteff.ru/site/menu2.htm I change it, but it still not works good. May be trouble into algorithm?
• Rafay: can you post some relevant code, particularly where you have applied mouseout

Answer 2

In your script you have the following:

 $('.dropdown').mouseOut(function() {...});

This is wrong as there is a typo. The mouseOut should be mouseout as shown below:

 $('.dropdown').mouseout(function() {...});

• butteff: butteff.ru/site/menu2.htm I change it, but it still not works good. May be trouble into algorithm? What do yo think about it?

Answer 3

I can't exactly put the finger on the problem in your code (most probably it fails because 'mouseout' event for link fires before 'mouseover' event for the menu)

I can, however, provide you with my own solution here, which uses $.stop() to suppress fading out on mouse movement from the link to the menu. Hope it helps.