CSS： <li> 并排？

Question

I'm trying to create a dropdown menu using CSS.

The only difference is that I need to put two different rows of submenu side by side in one dropdown menu.

To explain this I have attached an image so you can see what i mean:

Could someone please advise on this?

Answer 1

So you need to put 2 different columns side by side. This can be done by floating the column on the left and giving a margin-left to the column on the right.

 .col-left{ width:200px; float:left; border:1px solid red; } .col-right{ margin-left: 200px; width:200px; border:1px solid blue; } 

  <div class="col-left"> <ul class="list"> <li>first row</li> <li>second row</li> <li>third row</li> </ul> </div> <div class="col-right"> <ul class="list"> <li>first row</li> <li>second row</li> <li>third row</li> </ul> </div>