Dropdown in bootstrap + instead of list I want X columns of the list from the drop down list

Question

Here is my fiddle .

The section Dropdown1contains a list of actions presented in 1 column.

I want to present this list in more than 1 column, say 5 or page width.

I hope there are a few classbootstrap CSS that I can use to achieve this, but I may have to do some CSS.

How can i achieve this?

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1 <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Action</a></li>
  </ul>
</li>

EDIT1

this is what i'm thinking using:

.dropdown-menu {
    height: 300%;
    width: 400%;
}

but it is controlled by the drop-down list area, I need to expand the actions to fill this area.

EDIT2

another possible way, but this creates its problems

ul .dropdown-menu li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}

Answer 1

btn-gropus. .: http://getbootstrap.com/components/#btn-groups-nested

. , 5 .

Answer 2

, , display: inline-block li .

.dropdown-menu li {
  display: inline-block;
}

. , , , .