CODEWITHSUNDEEP
cssdrop-down-menu
Mckay Multimedia
Mckay Multimedia

Reputation: 1096

CSS Issues Navigation Dropdown Menu

My CSS worked fine with first level of the menu. No issues at all. Since I started trying to add drop-down/sub-menus, I have had all sorts of issues.

The best I can manage is having the menu drop down below the main menu like I want it to, but the sub-menu appears inline rather than a vertical list. Also the menu and submenu block appears to be extending higher then I want it to. I have the height set as inherit on everything inside the navigation container, but still I am getting this weird extension of the LI divider. You can see what I mean if you rollover the home menu link in codepen. I have been racking my brain about this for too long and really could use a fresh set of eyes looking at it cause I have tried so many different tweaks to my code now that I am lost. (Note: I got the framework for this drop-down menu from Son of Suckerfish. It's the only framework I could get to work at least this far.)

Image

Code

Upvotes: 0

Views: 142

Answers (2)

Sato
Sato

Reputation: 443

add width:50px; to #navigation li a

Upvotes: 0

Brandon
Brandon

Reputation: 3524

You can add this:

#navigation ul ul li {
    display: block;
}

It won't look right in codepen because the background image isn't rendering. Also, the red border to the right of your anchors won't line up because the width of the anchors depends upon their content. If you want it to line up you'll have to fiddle with that a little.

Upvotes: 1

Related Questions