JSFiddle - React, Tailwind, and code Playground

by Niranjan Rajendran

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="app">
  <div class="btn-group">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">
      Dropdown
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a class="dropdown-item" href="#">level 1a</a></li>
      <li><a class="dropdown-item" href="#">level 1b</a></li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-submenu">
        <a class="dropdown-item" tabindex="-1" href="#">
          level 1c
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" tabindex="-1" href="#">level 2a</a></li>
          <li class="dropdown-submenu">
            <a class="dropdown-item" href="#">
              level 2b
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">level 3a</a></li>
              <li><a class="dropdown-item" href="#">level 3b</a></li>
            </ul>
          </li>
          <li><a class="dropdown-item" href="#">level 2c</a></li>
          <li><a class="dropdown-item" href="#">level 2d</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  // DO NO MODIFY
  $(".btn-group, .dropdown").hover(
    function() {
      $('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
      $(this).addClass('open');
    },
    function() {
      $('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
      $(this).removeClass('open');
    });

</script>

CSS

#app {
  padding: 12px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>a:after {
  content: ">";
  float: right;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

TypeScript

document.addEventListener("click", (event) => {
	console.log("clicked", event.target.innerText);
})