JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li><a href="#">Home</a></li>
    <li><a>OS</a>
    <ul>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Windows</a></li>
    </ul>
  </li>
  <li><a>Dev</a>
    <ul>
        <li><a href="#">JSP</a></li>
        <li><a href="#">PHP</a></li>
        <li><a>ASP.NET »</a>
          <ul>
            <li><a href="#">C#</a></li>
            <li><a href="#">VB.NET</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a>Support</a>
    <ul>
      <li><a href="#">Register</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </li>
</ul>

CSS

* {
  margin: 0;
  padding: 0; 
}

body {
  background-color: #e5e5e5;
}

#menu {
  list-style: none;
  position: relative;
}

#menu ul {
  position: absolute;
  left: 0;  
  top: 100%;
  display: none;
}

#menu li {
  float: left;
  position: relative
}

#menu a {
  text-decoration: none;
  padding: 10px 0px;
  width: 7.5em;
  background-color: #604080;
  color: #ffffff;
  float: left;
  text-align: center;
  border: 1px solid #ffffff;
  cursor: context-menu;
}

#menu a:hover {
  background-color: #ecbf41;
  color: #333;
}

#menu li:hover ul {
  display: block;
}

#menu ul a {
  width: 10em;
}

#menu ul li {
  display: block;
}

#menu ul ul {
  top: 0;
  left: 100%;
}

#menu li:hover ul ul {
  display: none;
}

#menu ul li:hover ul {
  display: block;
}