JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/css/sm-simple/sm-simple.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/css/sm-core-css.css">
<ul id="main-menu" class="sm sm-simple">
  <li><a href="#">Product 1</a>
      <ul>
          <li><a href="#">Variant M</a></li>
          <li><a href="#">Variant L</a></li>
          <li><a href="#">Variant XL</a></li>
      </ul>
  </li>
  <li><a href="#">Product 2</a>
    <ul>
      <li><a href="#">Color</a>
          <ul>
            <li><a href="#">Black</a></li>
            <li><a href="#">White</a></li>
            <li><a href="#">Close</a></li>
          </ul>
      </li>
       <li><a href="#">Size</a>
          <ul>
            <li><a href="#">L</a></li>
            <li><a href="#">XL</a></li>
            <li><a href="#">Close</a></li>
          </ul>
      </li>
       <li><a href="#">Material</a>
          <ul>
            <li><a href="#">Material 1</a></li>
            <li><a href="#">Material 2</a></li>
            <li><a href="#">Close</a></li>
          </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Product 3</a></li>
</ul>

JavaScript

$('#main-menu').smartmenus({
        noMouseOver: true
});