JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div>
        <span>Logo+Text</span>
      </div>
      <div class="btn-group has_dropdown" style="margin-left: 200px">
        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
        <ul class="dropdown-menu" role="menu">
          <li>
            <a href="#">Sub List 1</a>
          </li>
          <li>
            <a href="#">Sub List 2</a>
          </li>
          <li>
            <a href="#">Sub List 3</a>
          </li>
          <li>
            <a href="#">Sub List 4</a>
          </li>
          <li>
            <a href="#">Sub List 5</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

.btn-group .dropdown-menu {
  display: inline-flex;
  transition: all 0s ease 1s; /*delay 1s*/
  visibility: hidden;
}
.btn-group:hover .dropdown-menu {
  transition-delay: 0s;
  visibility: visible;
}
.dropdown-menu > li {
  display: inline-block;
  float: left;
}
.has_dropdown {
  position: initial;
}