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.

HTML

Jessica Hemphill
Jessica Hemphill
767 Points

How to do I create an unordered list into multiple columns

How to do I create an unordered list into multiple columns

3 Answers

Jessica, Canada's Motorcycle is using just a single ul. The way they differentiate Motorcycle Helmets from Full Face, Modular, etc. is by using CSS and adding a class="primary" attribute to the <li> for Motorcycle Helmets. You can see that if you right-click on the page, then click See Page Source in the popup menu. Chrome will open a panel at the bottom of the page showing the html. Then right-click Motocycle Helmets and click Inspect Element in the popup menu. Chrome will take you directly to the html. I'd copy it here for you but you can't copy from Chrome's inspection panel (or if you can I haven't figured out yet how to do it!). Good luck!

Jessica Hemphill
Jessica Hemphill
767 Points

jcorum thank you so much for your help, I will try this!

Do you mean nested lists? Something like this?

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

The above example of nested lists comes from w3schools: http://www.w3schools.com/html/html_lists.asp

Jessica Hemphill
Jessica Hemphill
767 Points

I'm trying to created a drop down Sub Category Content Menu, and I need to split my list into two or even three columns. Something that is like what Canada Motorcycle is using for there website https://www.canadasmotorcycle.ca/street-bike.html