JSFiddle - React, Tailwind, and code Playground

by sivashanmugam kannan

HTML

<nav>
  <li>Home</li>
  <li class="has-submenu">About
  <div>
  <ul>
   <li>1</li>
    <li>2</li>
  </ul>
   
  </div>
  </li>
  <li>Contact</li>
</nav>

CSS

nav{
display:flex;
}

li.has-submenu{
  position:relative
  div{
    display:none;
    position:absolute;
  }
}

li.has-submenu:hover{
  position:relative
  div{
    display:block;
    position:absolute;
  }
}