JSFiddle - React, Tailwind, and code Playground

by Marvil

HTML

<nav class="menu">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">products</a>
        <ul>
          <li><a href="#">level 1</a></li>
          <li><a href="#">level 1</a></li>
          <li><a href="#">level 1</a></li>
        </ul>
      </li>
      <li><a href="#">about</a>
       <ul>
          <li><a href="#">level 1</a></li>
          <li><a href="#">level 1</a></li>
          <li><a href="#">level 1</a></li>
       </ul>
      </li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>

CSS

.menu{
    width:450px;
    margin:0 auto; 
    border:solid 1px #999;
    }
.menu ul{
    list-style:none; 
    text-align:center; 
    margin:0;  
    padding:0;            
    }
.menu ul li{
    display:inline; 
    margin:0 10px;
    }
.menu ul li a{
    font-size:18px; 
    color:#999; 
    text-decoration:none;
    text-transform:capitalize;
    }
.menu ul li a:hover{
    color:#333; 
    }
    

/* dropdown menu */    
.menu ul ul{
    display:none;
    position:absolute;
    border:solid 1px #F00;
    width:130px;
    }
.menu ul li:hover ul{
    display:block;
    }
.menu ul ul li{
    float:right;
    }