JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
        <div class="dropdown rel"> 
            <a id="UserMenu" class="dropdown-toggle" title="Your stuff" href="#" 
            data-toggle="dropdown">
                    This works
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="/Members/MySongWorkspaces.aspx">My Workspaces</a>
                </li>
                <li class="divider"></li>
                <li><a href="/Members/Bands/MyBands.aspx">My Bands</a>
                </li>
                <li><a href="/Members/Bands/MyAuditions.aspx">My Auditions</a>
                </li>
                <li class="divider"></li>
                <li><a href="/Members/ManageMediaFiles.aspx">My Music</a>
                </li>
                <li><a href="/Help/Wiki/MyArticles.aspx">My Articles</a>
                </li>
                <li><a href="/Members/MyUploads.aspx">My Uploads</a>
                </li>
                <li class="divider"></li>
                <li><a id="UserMenuProfileLink" runat="server">My Profile</a>
                </li>
            </ul>
        </div>

<div class="dropdown">
   <a id="UserMenu" class="dropdown-toggle" title="Your stuff" href="#" 
            data-toggle="dropdown">
                    This does not
                </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

CSS

.rel{ position: relative;}