I created a dropdown with two columns. Now I wonder why 1 column gets expanded if links are longer while 2 column does not behave that way. For the two column I had to increase the minimum width. Otherwise, links from the second column would overlap with those form the column 1.
Except the minimum width change and left and right columns width, the rest of CSS intervention was mostly for the look purpose, not the layout (just added >li>ul> to replicate original bootstrap styling).

Why the 2 columns does not expand based on the link text length? The default 1 column dropdown does it. Did I miss something in my custom CSS (some li or ul setting)?

Thanks

HTML

<ul class="dropdown-menu dropdown-2c" role="menu">
<li>
<ul class="list-unstyled left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="list-unstyled right">
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>

Custom CSS

.dropdown-2c{min-width:270px}
.left{float:left;width:55%}
.right{float:left;width:45%}
.dropdown-menu>li>ul>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}
.dropdown-menu>li>ul>li>a:focus,.dropdown-menu>li>ul>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}
@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>li>ul>li>a{color:#9D9D9D}}

P.S.
CSS

.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}

This active (blue background) for dropdown does not work with two columns. I'm pretty sure it's on the javascript side, but not sure which part I should look into.