Jump to content
littlevictorian

Vertical drop down menu

Recommended Posts

Hello all. I'm relatively new to CSS, so please be gentle with me. :) I have a question about a vertical drop down menu I'm working on. It's looking decent so far. You can see it here, under my photo. dropdown%20problem.jpg But, as you can see in the photo, I'm hovering over "the little victorian." Obviously, I'd rather have the other categories move down while I'm hovering instead of being covered up. Make sense? I'm sure there are proper terms that I'm not using. :) I am also sure there is more information you need from me before anyone can answer. Just let me know what it is and I'll provide it! Thank you,Christina

Share this post


Link to post
Share on other sites

Some part of the drop menu (the ul and/or the li elements) needs a background color (so it's not transparent) and a z-index of 1 or higher (so it is rendered "in front of" the rest of the document). Doing that with the right combination of selectors can be tricky, so experiment. You'll also notice that your li elements don't always fit quite right, so you may want to change some dimensions as well.

Share this post


Link to post
Share on other sites

Thank you for your response! Yes, I could add a background color, but that's not exactly what I was hoping for. Is there a way to make the other list items move down when you hover and display a sub menu? For example, as I'm hovering "the little victorian," (photo above)and it's displaying the sub menu, is there a way to move the other list items down, so "let's be friends" and "topics" would be displayed below "our attic office?" Sorry, it's kind of hard to describe. I'll see if I can find an example out there.

Share this post


Link to post
Share on other sites

It's probably this ruleset that prevents that from happening:

#dropmenu ul li:hover ul {	 display: block;	 position: absolute;}

Try removing the position rule.

Share this post


Link to post
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.

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...