JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div class="collapse navbar-collapse navbar-ex1-collapse">
	<ul class="nav navbar-nav"><li class="menu-item item active"><a href="#">Home</a></li>
      <li class="menu-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
        <ul class="dropdown-menu">
           <!--START Printing-->
            <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Printing & Packaging</a>
              <ul class="dropdown-menu">
                <li class="menu-item "><a href="#">Emirates Printing Press</a></li>
              </ul>
            </li>
             <!--END Printing-->
             <!--START OIL-->
            <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Oil & Gas</a>
              <ul class="dropdown-menu">
                <li class="menu-item "><a href="#">Arabian Oasis Industries</a></li>
                <li class="menu-item "><a href="#">Aswan International Engineering Company</a></li>
                <li class="menu-item "><a href="#">Aswan National Oilwell Varco LLC</a></li>
              </ul>
            </li>
             <!--END Printing-->
               <!--START Logistics-->
            <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Logistics</a>
              <ul class="dropdown-menu">
                <li class="menu-item "><a href="#">Global Shipping & Logistics</a></li>
              </ul>
            </li>
              <!--END Logistics-->
              <!--START Heavy Equipment-->
            <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Heavy Equipment</a>
              <ul class="dropdown-menu">
                <li class="menu-item "><a href="#">Al shirawi Equipment</a></li>
                <li class="menu-item "><a href="#">Al shirawi...

CSS

.dropdown-menu{
    display:none;
}

.open > .dropdown-menu{
    display:block;
}

JavaScript

$(document).ready(function() {
        
            $('li > a').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    //$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $('li').removeClass('open');
    $(this).parents().addClass('open');
            });
 });