Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tom Nunn
Tom Nunn
16,333 Points

How to create a Two Column Submenu?

Hi Guys,

I'm looking into having a two column submenu to prevent a long list of menu items on a dropdown.

I have tried the following:

.sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

The (even) class does not seem to float as it should to the right, so both menu items sit nicely side by side.

Any ideas?

2 Answers

Ihor Zhuk
Ihor Zhuk
13,263 Points

Hi, Tom

Just give the ul element width of 200px. Then give each li element width of 50%. Now you don't need to specify different floats for different even and odd li items

Garrett Levine
Garrett Levine
20,305 Points

As mentioned above, but you will really want to use floats or flexbox to make sure they they fall beside eachother in the way that you want them to.

you can achieve this by giving the <li> a width of 50% and making them "display: inline-block;" . this will result in as strange white space though, due to an innate 'feature' of display: inline-block , so I don't recommend it.

with floats you will put a .clearfix on the <ul> and then float all the <li> items with a width of 50%. that way they will stack beside one another and full the whole container at all sizes! :D

you can also achieve the same idea with the use of flexbox pretty easily! If you want me to walk you through that let me know !

Tom Nunn
Tom Nunn
16,333 Points

Hi Garret,

Thank for this, yes if you wouldn't mind going into a little further detail that would be great :D