I’m helping out with a Drupal site, and it has some dropdown menus.
The problem is the dropdowns are fairly difficult for a user to use – the area is so small that when you try to make your way to the next level of dropdown, the mouse often leaves the mouseover area, and the whole menu collapses.
I’m wondering the best way to fix this. I tried adding to the padding, but it doesn’t seem to fix the problem. This must be a UX problem people have had before, and I’m hoping for some advice.
It’s easiest to see in the Archives menu, because it goes to a fourth level dropdown, and it gets tricky to navigate over there at any speed.
The problem occurs because you have no overlap between the elements. This means the curson actually goes goes off the parent element before reaching the child element … thus the menu closes. Try moving the sub sub menu UL leftward one or two pixels, leftward ( you can use: margin-left:-1px; to accomplish this.