JSFiddle - React, Tailwind, and code Playground

by moumensoliman

HTML

<div id="navWrapper">
      <ul id="menu">
         <li class="item"><a href="#">Small Things</a>
            <ul class="submenu">
               <li class="subitem"><a href="#">Gnomes</a></li>
               <li class="subitem"><a href="#">Fairies</a></li>
               <li class="subitem"><a href="#">Elves</a></li>
               <li class="subitem"><a href="#">Leprechauns</a></li>
            </ul>
         </li>
         <li class="item"><a href="#">Big Things</a>
            <ul class="submenu">
               <li class="subitem"><a href="#">Loch Ness Monster</a></li>
               <li class="subitem"><a href="#">Ogres</a></li>
               <li class="subitem"><a href="#">Giants</a></li>
               <li class="subitem"><a href="#">Dragons</a></li>
            </ul>
         </li>

      </ul>
  </div>

CSS

#menu
{
   margin:0;
   font-size: 30px;
   border-bottom: 1px solid;
   text-align: center;
}

#menu a
{
   color:#900;
   text-decoration:none;
}

#menu .subitem a{
   display: block;
   padding: 12px 16px;
   z-index: 1;
  background-color: #f1f1f1;
  border-bottom: 1px solid;
  width: 100%;
}

#menu a:hover
{
   text-decoration:underline;
   background: #900;
   color: white;
}

.item{
   position: relative;
   display: inline-block;
   border-right: 0.5px solid;
   padding-right: 30px;
   padding-left: 30px;
}

.subitem{
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  left: 0;
  z-index: 1;
}

#menu .item:hover .subitem{
    display: block;
}