I am developing a dropdown menu using jQuery (I’m still a beginner). Basically, this is what I am having trouble with:
When I hover my mouse over "li.guide", the menu slides down as it should. But, when I try to click on or just hover on the menus that dropped down, the menu slides back up. Basically, the script I pasted below says this (the incorrect approach):
"Hover over li.guide, drop the menu down. When someone hovers off li.guide, collapse it."
And what i want to happen is someone hovers over li.guide and they move their mouse down to be able to click the content in the dropdown menu. But, when they hover their mouse off of the menu, it slides back up.
I have the exact same problem – so must thousands of others and it’s amazing with it being such a common problem that there aren’t a bunch of video tutorials out there telling us how to solve it. My problem is worse because I’m using sprites as well. And I don’t want to use a plugin – I want to understand how to do it myself.
What I tried was to add a function so when you mouseover the dropdown, it shows until mouseout. That way, as you mouse from the top level button to the drop down, it stays showing until you mouseout. The snag then is that if you mouseover the dropdown without going to the top level button first, it still shows, which is not what you want.
I’m wondering if this is actually more advanced than we realise and maybe we need an ‘if’ statement or something of the sort.