CSS: rows of <li> side by side?

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:

enter image description here

Could someone please advise on this?

BassMHL · Accepted Answer · 2015-04-06 13:02:36Z

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>

I may be wrong, but would it not be better to have the second column as float:left instead of the large 200px margin. Helps then with responsiveness if added too.

Collectives™ on Stack Overflow

CSS: rows of <li> side by side?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related