JSFiddle - React, Tailwind, and code Playground

by JJ Gerrish

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse text-right">
    <ul class="nav navbar-nav pull-left">
      <li>
        <div class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Testing</a>
          <ul class="dropdown-menu dropdown-menu-arrow">
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

CSS

a {
  color: #fff
}

a:focus,
a:hover {
  color: #fff!important;
  border-bottom: 1px solid #fff;
  text-decoration: none
}

@media (min-width:768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown-menu-arrow:before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
  }
  .dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
  }
  .dropdown-toggle {
    padding: 10px;
  }
}