JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">The fly out menu breaks if this is long</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link width 100 still causes a prob</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

CSS

.dropdown-menu {
    float:right;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    min-width: 100%;
}