CSS Issues Navigation Dropdown Menu

Question

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

Code

Brandon · Accepted Answer · 2012-08-02 05:15:01Z

1

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.

answered Aug 2, 2012 at 5:15

Brandon

3,5541 gold badge18 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mckay Multimedia Over a year ago

Whoa I can't believe I forgot this. I actually solved the problem but this was the correct approach in this instance. The front end of the site has been redesigned completely rebuilt with Bootstrap now though.

Sato · Accepted Answer · 2012-08-02 05:35:05Z

0

add width:50px; to #navigation li a

answered Aug 2, 2012 at 5:35

Sato

4434 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS Issues Navigation Dropdown Menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related