JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="content">

    <ul id="nav">
      <li><a href="#" class="current">Accueil</a></li>
      <li><a href="#">Rétroplanning</a></li>
      <li><a href="#">Conditions</a></li>
      <li><a href="#">Templates</a>
        <ul class="subs">
          <li><a href="#">Clients</a></li><br>
          <li><a href="#">MO</a></li><br>
          <li><a href="#">MO Suivi</a></li><br>
          <li><a href="#">OM/BM</a></li><br>
          <li><a href="#">Rétroplanning</a></li>
        </ul>
      </li>
      <li><a href="#">Escalations</a>
        <ul class="subs">
          <li><a href="#">OM/BM</a></li><br>
          <li><a href="#">MO</a></li><br>
        </ul>
      </li>
      <li><a href="#">Formation</a>
        <ul class="subs">
          <li><a href="#">E-Learning & Quiz</a></li><br>
          <li><a href="#">Instruction</a></li>
          <li><a href="#">Statistiques</a></li>
        </ul>
      </li>
      <li><a href="#">Travail individuel</a>
        <ul class="subs">
          <li><a href="#">Kevin</a></li><br>
          <li><a href="#">Pierre</a></li><br>
          <li><a href="#">Romain</a></li><br>
          <li><a href="#">Jacques</a></li><br>
          <li><a href="#">Jean</a></li>
        </ul>
      </li>
      <li><a href="#">FAQ</a></li>
      <li><a href="mailto:?to=test@test.be &subject=Contact%20:%20Projet%20test">Nous contacter</a></li>
      <li><a href="#">Remerciements</a></li>
    </ul>
  </div>
</div>
 <br /><br />

CSS

body {
  background-color: #333;
}

ul#nav {
  color: #232223;
  display:block;
  float:left;
  font: 13px/23px Georgia,"Times New Roman",Times,serif;
  padding-bottom: 5px;
}
ul#nav,ul#nav ul {
  list-style:none;
}
ul#nav .subs {
  background-color: #FDF1B8;
  border:1px solid #F5F5DC;
  display:none;
  float:left;
  left:0;
  padding:7px;
  position:absolute;
  top:100%;
}
ul#nav li:hover>* {
  display:block;
}
ul#nav li:hover {
  position:relative;
}
ul#nav ul .subs {
  left:100%;
  position:absolute;
  top:0;
}
ul#nav ul {
  padding:0 3px 3px;
}
ul#nav li {
  display:inline;
  float:left;
}
ul#nav a {
  color: #FEFEFE;
  float: left;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 14px;
  min-width: 60px;
  padding: 60px 20px;
  text-align: left;
  text-decoration: none;
  text-shadow: 1px 1px 0 #F5F5DC;
  text-transform: uppercase;
  white-space: nowrap;
}
ul#nav > li:hover > a {
  border-top: 5px solid #F5F5DC;
  color: #1e1e1e;
  padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
  background: url("../images/nav_current.png") no-repeat scroll center top transparent;
  border: medium none;
  color: #F5F5DC;
  padding-top: 60px;
  text-shadow: none;
}
ul#nav ul a {
  color:#000;
  font-size:10px;
  font-weight:bold;
  padding:5px;
  text-shadow:#F5F5DC 0 0 0;

  border-radius:0;
  -moz-border-radius:0;
  -webkit-border-radius:0;
}
ul#nav ul li:hover>a {
  letter-spacing:2px;
}