Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Tom Nunn
Tom Nunn
16,333 Points
Posted by 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
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
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
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