JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div id="yt_resmenu_sidebar">
  <ul class="nav-menu clearfix">
    <li class="sm_megamenu_actived"> <a href="https://www.maximomoto.com/" title="Home"><span>Home</span></a> </li>
    <li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> <a href="https://www.maximomoto.com/motorcycle-leather-boots/"> <span>Motorcycle Leather Boots</span> </a>
      <ul class="level0">
        <li class="level1 nav-1-1 first"> <a href="https://www.maximomoto.com/motorcycle-leather-boots/spyke/"> <span>Spyke Boots</span> </a> </li>
        <li class="level1 nav-1-2"> <a href="https://www.maximomoto.com/motorcycle-leather-boots/agvsports-boots/"> <span>AGVSports Boots</span> </a> </li>
        <li class="level1 nav-1-3"> <a href="https://www.maximomoto.com/motorcycle-leather-boots/r-tech/"> <span>R-TECH</span> </a> </li>
        <li class="level1 nav-1-4 last"> <a href="https://www.maximomoto.com/motorcycle-leather-boots/4riders-boots/"> <span>4Riders Boots</span> </a> </li>
      </ul>
    </li>
    <li class="level0 nav-2 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> <a href="https://www.maximomoto.com/motorcycle-leather-gloves/"> <span>Motorcycle Leather Gloves</span> </a>
      <ul class="level0">
        <li class="level1 nav-2-1 first"> <a href="https://www.maximomoto.com/motorcycle-leather-gloves/agvsport-gloves/"> <span>AGVSPORT Gloves</span> </a> </li>
        <li class="level1 nav-2-2"> <a href="https://www.maximomoto.com/motorcycle-leather-gloves/zeros-gloves/"> <span>ZEROS Gloves</span> </a> </li>
        <li class="level1 nav-2-3"> <a href="https://www.maximomoto.com/motorcycle-leather-gloves/spyke-gloves/"> <span>Spyke Leather Gloves</span> </a> </li>
        <li class="level1 nav-2-4 last"> <a href="https://www.maximomoto.com/motorcycle-leather-gloves/rtech-gloves/"> <span>RTech Leather Gloves</span> </a> </li>
      </ul>
    </li>
    <li class="level0 nav-3 parent"...

CSS

#yt_resmenu_sidebar{}
#yt_resmenu_sidebar ul{ margin:0; padding:0;}
#yt_resmenu_sidebar ul li{ position:relative; list-style:none;}
#yt_resmenu_sidebar ul > li{ float:left;}
#yt_resmenu_sidebar ul > li a{ padding: 15px 10px; display: block; font-size: 125%; text-transform: capitalize; text-decoration:none; color: #666;}
#yt_resmenu_sidebar ul > li.sm_megamenu_actived a{ background: #b50016; color: #fff;}

#yt_resmenu_sidebar ul li ul{ position:absolute; top:100%; left:0; width:100%; transform: scale(0); opacity: 0; box-shadow: 0 4px 4px #999; -webkit-transition: all 0.3s ease-in-out 0s; z-index: 99999; background: #f2f2f2;}

#yt_resmenu_sidebar li ul{ padding: 15px 10px;}
#yt_resmenu_sidebar li li{ float:none;}
#yt_resmenu_sidebar ul li ul li a{ line-height: 30px; font-size:12px; padding:0;}


#yt_resmenu_sidebar ul li:hover ul{  transform: scale(1); opacity: 1;}