JSFiddle - React, Tailwind, and code Playground

by Klopfa10

HTML

<nav id="main-nav" role="navigation">
  <ul id="main-menu" class="sm sm-blue">
  
    <!-- Hauptmenü-Punkt -->
    <li><a href="#">Test</a>
	  <ul>
	    <li><a href="#">Test</a>
		  <ul>
		    <li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		  </ul>
		<li><a href="#">Test</a>
		  <ul>
		    <li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		  </ul>
		<li><a href="#">Test</a>
		  <ul>
		    <li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		  </ul>
		<li><a href="#">Test</a>
		  <ul>
		    <li><a href="#">Test</a></li>
		    <li><a href="#">Test</a>
			  <ul>
			    <li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
			  </ul>				
			</li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a>
			  <ul>
			    <li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
			  </ul>						
			</li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a>
			  <ul>
			    <li><a href="#">Test</a></li>
			  </ul>
			</li>
			<li><a href="#">Test</a>
			  <ul>
			    <li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
			  </ul>
			</li>
			<li><a href="#">Test</a>
			  <ul>
			    <li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
			  </ul>			 ...

CSS

.sm {
  position: relative;
  z-index: 9999;
}

.sm,
.sm ul,
.sm li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: normal;
  direction: ltr;
  text-align: left;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sm-rtl,
.sm-rtl ul,
.sm-rtl li {
  direction: rtl;
  text-align: right;
}

.sm>li>h1,
.sm>li>h2,
.sm>li>h3,
.sm>li>h4,
.sm>li>h5,
.sm>li>h6 {
  margin: 0;
  padding: 0;
}

.sm ul {
  display: none;
}

.sm li,
.sm a {
  position: relative;
}

.sm a {
  display: block;
}

.sm a.disabled {
  cursor: not-allowed;
}

.sm:after {
  content: "\00a0";
  display: block;
  height: 0;
  font: 0px/0 serif;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

.sm,
.sm *,
.sm *:before,
.sm *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
.sm-blue {
  background: transparent;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.sm-blue a,
.sm-blue a:hover,
.sm-blue a:focus,
.sm-blue a:active {
  padding: 10px 20px;
  /* make room for the toggle button (sub indicator) */
  padding-right: 58px;
  background: #67aabf;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlYWVjMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwYTZiYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image:...

JavaScript

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Global jQuery
    factory(jQuery);
  }
}(function(jQuery) {

  var menuTrees = [],
    IE = !!window.createPopup, // detect it for the iframe shim
    mouse = false, // optimize for touch by default - we will detect for mouse input
    touchEvents = 'ontouchstart' in window, // we use this just to choose between toucn and pointer events, not for touch screen detection
    mouseDetectionEnabled = false,
    requestAnimationFrame = window.requestAnimationFrame || function(callback) {
      return setTimeout(callback, 1000 / 60);
    },
    cancelAnimationFrame = window.cancelAnimationFrame || function(id) {
      clearTimeout(id);
    };

  // Handle detection for mouse input (i.e. desktop browsers, tablets with a mouse, etc.)
  function initMouseDetection(disable) {
    var eNS = '.smartmenus_mouse';
    if (!mouseDetectionEnabled && !disable) {
      // if we get two consecutive mousemoves within 2 pixels from each other and within 300ms, we assume a real mouse/cursor is present
      // in practice, this seems like impossible to trick unintentianally with a real mouse and a pretty safe detection on touch devices (even with older browsers that do not support touch events)
      var firstTime = true,
        lastMove = null;
      jQuery(document).bind(getEventsNS([
        ['mousemove', function(e) {
          var thisMove = {
            x: e.pageX,
            y: e.pageY,
            timeStamp: new Date().getTime()
          };
          if (lastMove) {
            var deltaX = Math.abs(lastMove.x - thisMove.x),
              deltaY = Math.abs(lastMove.y - thisMove.y);
            if ((deltaX > 0 || deltaY > 0) && deltaX <= 2 && deltaY <= 2 && thisMove.timeStamp - lastMove.timeStamp <=...