JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <nav class='animated flipInX'>
    <ul>
      <li>
        <a href='#'>
          <div class='fa fa-home'></div>
        </a>
      </li>
      <li>
        <a href='#'>
        меню
      </a>
      </li>
      <li>
        <a href='#'>
        меню
     </a>
      </li>
      <li>
        <a href='#'>
        меню
     </a>
      </li>
      <li>
        <a href='#'>
       меню
     </a>
      </li>
      <li>
        <a href='#'>
        меню
     </a>
      </li>
      <li>
        <a href='#'>
        меню
     </a>
      </li>
      <span class="contact_info">Email: <a href="mailto:support">support</a></span>
    </ul>
  </nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
.menu {
  position: block;
  max-width: 100%;
  background: #fff;
}

.contact_info {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14px;
}

nav {
  position: inherit;
  max-width: 100%;
  margin: 0px 0 0 0px;
}

nav ul {
  position: inherit;
  background: #48cfad;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

nav ul li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  text-align: center;
}

nav ul li:first-child a {
  background: #37bc9b;
  width: 49px;
  padding: 15px 0;
}

nav ul li:last-child {
  margin: 0;
}

nav ul li a {
  display: block;
  background: #48cfad;
  padding: 15px 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s linear;
}

nav ul li a:hover {
  background: #37bc9b;
}

nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  border-bottom: 4px solid #48cfad;
}

nav ul li ul li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
}

nav ul li ul li a {
  display: block;
  background: #3a3a3a;
  padding: 10px 15px;
}

nav ul li ul li a:first-child {
  background: #3a3a3a;
  width: auto;
  border-left: 4px solid transparent;
  padding: 10px 15px;
  font-size: 14px;
}

nav ul li ul li a:hover {
  background: #333;
  border-left: 4px solid #48cfad;
}

JavaScript

$('.sub-menu ul').hide();
$(".sub-menu a").click(function() {
  $(this).parent(".sub-menu").children("ul").slideToggle("200");
  $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});