Jump to content

Pure CSS drop down menu help


baharra

Recommended Posts

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.

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...