JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
          <ul>
            <li><a href="#">Webdesign</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Illustration</a></li>
            <li><a href="#">Search engine</a></li>
            <li><a href="#">WordPress</a></li>
          </ul>
        </li>
    
</ul>

CSS

li {
    float:left;
    width:100px;
    position:relative;
    
    
  }
  
  ul#nav li a {
    display: block;
  }
  
  /*hide an sub menus*/
  ul#nav li ul {
    position:absolute;
    top:20px;
    left:-40px;
    display:none;
    
  }
  
  ul#nav li:hover ul
  {
    display: block;
  }