JSFiddle - React, Tailwind, and code Playground

by giovanni gokhan morkoc

HTML

<div class="container">
  <ul class="dropdown">
    <li><a href="#">Link 1</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 2</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 3</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 4</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 5</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 6</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 7</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Link 8</a>
      <ul class="gm">
        <li><a href="#">Link 1</a></li>
       ...

CSS

.dropdown,
.dropdown li,
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown {
  position: relative;
  z-index: 10000;
  float: left;
  width: 100%;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  visibility: hidden;
  display: none;
  z-index: 900;
  width: 450px;
}

.dropdown ul ul {
  top: 0;
  left: 100%;
}

.dropdown li {
  position: relative;
  float: left;
}

.dropdown li:hover {
  z-index: 910;
}

.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {

}

.dropdown a {
  display: block;
  background: #333;
  color: #fff;
  padding: 1em 2em;
}

.dropdown ul li {
  width: 100%;
}

.dropdown li:hover a {
  background: #333;
}

.dropdown li a:focus,
.dropdown li a:hover {
  background: #666;
}

.dropdown .lastNavItem .gm {
  right: 0;
}

JavaScript

$(".dropdown li:last-child").on('mouseenter mouseleave', function(e) {
      var newSize = document.body.currentStyle || window.getComputedStyle(document.body, "");

      var menuHover = newSize.overflow == "visible" || newSize.overflowY == "visible" || (menuHover && newSize.overflow == "auto") || (menuHover && newSize.overflowY == "auto");

      if (menuHover) {
        $(this).addClass('lastNavItem');
      } else {
        $(this).removeClass('lastNavItem');
      }
    });