JSFiddle - React, Tailwind, and code Playground

by dezignas

HTML

<ul id="nav">
  <li class="current"><a href="#">Link1</a>
    <ul>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
    </ul>
  </li>
  <li><a href="#">Link2</a>
    <ul>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
    </ul>
  </li>
  <li><a href="#">Link3</a>
    <ul>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
    </ul>
  </li>
</ul>

CSS

* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:3.8em;
width:408px;
position:relative;
line-height:1.4em;
}
#nav li {
width:136px;
float:left;
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:#999;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#777;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0;
}
#nav ul {
position:absolute;
left:-999em;
width:408px;
list-style:none;
padding:.9em 0 0;
}
#nav ul li {
width:auto;
margin:0 15px 0 0;
}
#nav ul a {
font-size:80%;
height:auto;
padding:0 8px;
}
#nav li:active ul, #nav li:hover ul { 
left:0;
background:#fff;
}