JSFiddle - React, Tailwind, and code Playground

by DoomHamster

HTML

<ul id="navbar">
  <li><a href="#">General Motors</a>
    <ul>
      <li><a href="#">GMC</a></li>
      <li><a href="#">Chevrolet</a></li>
      <li><a href="#">Pontiac</a></li>
      <li><a href="#">Buick</a></li>
      <li><a href="#">Cadillac</a></li>
    </ul>
  </li>
  <li><a href="#">DeLorean</a></li>
  <li><a href="#">Chrysler Motors</a>
    <ul>
      <li><a href="#">Dodge</a></li>
      <li><a href="#">Chrysler</a></li>
      <li><a href="#">Jeep</a></li>
      <li><a href="#">AMC</a></li>
      <li><a href="#">Plymouth</a></li>
    </ul>
  </li>
  <li><a href="#">Tesla</a></li>
  <li><a href="#">Ford Motor Company</a>
    <ul>
      <li><a href="#">Ford</a></li>
      <li><a href="#">Lincoln</a></li>
      <li><a href="#">Mercury</a></li>
      <li><a href="#">Merkur</a></li>
      <li><a href="#">Jaguar</a></li>
    </ul>
  </li>
</ul>

CSS

#navbar {
    background-color: #666;
    padding: .25em;
}
#navbar li {
    display: inline;
}
#navbar li a {
    margin: .25em;
    color: #eee;
    text-decoration:none;
}

#navbar li a:hover, #navbar li a:focus {
    margin: .25em;
    color: #333;
    background-color: #ccc;
    text-decoration:none;
}

#navbar ul li {
    display:block;
}
.hidden {
    display:none;
}
#navbar, #navbar ul {
    list-style: none;
}

#navbar ul{
    background-color: #eee;    
}

#navbar {
    float: left;
}
#navbar > li {
    float: left;
}
#navbar li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#navbar ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#navbar ul li a {
    width: 80px;
    color: #333;
}
#navbar li:hover ul {
    display: block;
}

JavaScript

$('#navbar ul').addClass('hidden');
$('#navbar li a').on('focusin focusout mouseover mouseout', function(event) {
    //$('#toggle').toggle();
    if (event.type == 'focusin' || event.type == 'mouseover') {
        $(this).siblings('ul').show();
    }
    else {
        $(this).siblings('ul').hide();
    }
});