CODEWITHSUNDEEP
htmlcss
H.HISTORY
H.HISTORY

Reputation: 518

CSS: rows of <li> side by side?

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?

Upvotes: 0

Views: 153

Answers (1)

BassMHL
BassMHL

Reputation: 9047

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>

Upvotes: 2

Related Questions