Pure CSS drop down menu help

[baharra]

I am creating a site and am having difficulty with a basic pure CSS drop down menu. When I roll over the specified area, the drop down appears, I can easily roll over the first link in the drop down area, but if I try to go further down the drop down area (still links) the drop down disappears. Sometimes, if I go really fast, I can get to the third or fourth menu item.

 

Any help would be greatly appreciated. I've been working on this for two days and I can't get it figured out. I'm a bit of a purest and really want to understand what is going into my sites, since I don't understand js, I don't want to use it if I don't absolutely have to.

 

Thanks in advance.

[Andrea]

Can we see what you have? How else can we possible evaluate?

[Wickham]

I've had that problem too. It's caused by a small gap between the drop down boxes, usually between the top level and the first of the drop down boxes, but in your case you can reach the first one, but not lower ones, which is slightly different.

 

You need to adjust the top and bottom borders, padding and margins to the drop down level and possibly to the top level too, I suggest you make them 0 at first and see whether the connection is OK, then adjust them as you want until it breaks again.

 

Look for style codes which have one ul and or li for the top level like

#menu ul li { } or #menu li { }

and two for the drop down level like

#menu ul ul { } or #menu ul ul li { } or #menu li li { } or #menu ul li ul li { }

 

Edit: line-height can also be a cause, so endless fiddling with padding, margins and line-height may be necessary.

Edited February 26, 2009 by Wickham

[baharra]

Thank you Wickham. The line height was what needed adjusting. I had already set the margin and padding to 0, but to no avail. As soon as I changed the line height, it worked, then (just like you said) I simply tested what padding was acceptable. Can't thank you enough, you saved me from going absolutely in sane.