JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <ul>
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h1                                  
      id="hello"><em>User Name</em></h1>
      <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><i class="icon-arrow-up"></i><a href="#">Logout</a></li>
        <li><i class="icon-arrow-down"></i><a href="#">Update Profile</a>   
         </li>
       </ul>
       </li>
      </ul>

CSS

.dropdown-menu a {
       white-space:normal;
       left: 1000px;
       padding-bottom: 100px;
       }

      .dropdown-menu > li{position:relative;}

      .dropdown-menu > li > i{position:absolute;left:0;top:3px;}

JavaScript

$('ul li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(200);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(200);
});