JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<div id="header">
  <div id="nav">
    <ul>
      <li id="parent"><a href="#">Parent</a>
        <ul id="children">
          <li><a href="#">Child #1</a></li>
          <li><a href="#">Child #2</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- end nav -->
</div>

CSS

#header {
    position: relative;
    display: block;
    border-color:#fff;
    height: 64px;
    background-color:#FFFFFF;
    width:100%;
}

#nav li:hover ul {
    display:block;
    z-index:100;
}

#nav li li {
    float:none;
        width:105%;
}

#nav li {
    float:left;
    margin-right:25px;
}

#nav {
    position:absolute;
    left:10px;
    top:1px;
}

#nav ul {
    list-style:none;
    margin:0;
    padding:0em;
    font-size:9pt;
    font-weight:bold;
    float:left;
    position:relative;
}

#nav li {
    float:left;
    margin-right:25px;
}

#nav li#parent {
    background-color:#FFF;
}
#nav li#parent a {
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover a {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

#nav li#parent a:hover {
    background-color:#668CFF;
    border-top:1px solid #668CFF;
    border-right:1px solid #668CFF;
    border-bottom:1px solid #668CFF;
    border-left:1px solid #668CFF;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
}

#nav li#parent:hover ul {
    padding:0px;
    z-index:350;
}

#nav li {
    background-color:#CCD9FF;
}

#children li:hover {
    background-color:#668CFF;
}

#children li:hover a {
    color:#ffffff;
}

ul#children li:first-child {
    border-top-right-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-left:1px solid #99B3FF;
    border-right:1px solid #99B3FF;
    border-top:1px solid #B4CDFF;
}

ul#children li:last-child {
    border-bottom-right-radius:5px 5px;
   ...