JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="navigation">
    <li class="navigationItem"><a href="">About</a>
      <ul class="subNavigation">
        <li><a href="">Who are we?</a></li>
        <li><a href="">What do we do?</a></li>
      </ul>
    </li>
    <li class="navigationItem"><a href="">Portfolio</a>
      <ul class="subNavigation">
        <li><a href="">Banner</a></li>
        <li><a href="">Webdesign</a></li>
        <li><a href="">Responsive webdesign</a></li>
        <li><a href="">Artwork</a></li>
      </ul>
    </li>
    <li class="navigationItem"><a href="">History</a>
      <ul class="subNavigation">
        <li><a href="">The beginning</a></li>
        <li><a href="">Current</a></li>
        <li><a href="">The future</a></li>
      </ul>
    </li>
    <li class="navigationItem"><a href="">Contact</a>
      <ul class="subNavigation">
        <li><a href="">Where can you find us?</a></li>
        <li><a href="">Contactform</a></li>
        <li><a href="">Route description</a></li>
      </ul>
    </li>
    <li class="clear"></li>
  </ul>

CSS

/* NAVIGATION */
.navigation {
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  background: #222;
}

.navigation li {
  float: left;
    list-style:none;
}

.navigation a {
  display: block;
  height: 50px;
  padding: 0 15px;
  line-height: 50px;
  color: #FFF;
  text-decoration: none;
  background: #222;
}

.navigation a:hover,
.navigation li.active > a {
  background: #111;
  color: #5F97B8;
}

/* SUBNAVIGATION */
.subNavigation {
  position: absolute;
  display: none;
  font-weight: 500;
  border-radius: 0 0 5px 5px;
float: left;
margin: 0;
padding: 0;
}

.subNavigation li {
  float: none;
    list-style:none;
}

.subNavigation li a {
  font-size: 14px;
  background: #111;
}

.subNavigation li:last-child a {
  border-radius: 0 0 5px 5px;
}

.subNavigation li a:hover {
  color: #5F97B8;
  background: #000;
}

.main {
  float: left;
  width: 57.5%;
  padding: 2.5% 0 0 2.5%;
}

.side {
  float: right;
  width: 30%;
  margin: 2.5% 2.5% 0 0;
  padding: 2.5%;
  background: #f0f0f0;
}

.footer {
  width: 95%;
  padding: 0 2.5%;
  height: 100px;
  margin-top: 20px;
  font-size: 10pt;
  line-height: 100px;
  border-top:
    solid
    1px
    #CCC
}

.clear {
  clear: both;
}

JavaScript

$('.navigation > li').bind('mouseover', openSubMenu);
$('.navigation > li').bind('mouseleave', closeSubMenu);

function openSubMenu() {
  $(this).addClass('active');
  $(this).find('> ul').stop(true, true).slideDown(200);
}

function closeSubMenu() {
  $(this).removeClass('active');
  $(this).find('> ul').stop(true, true).slideUp(200);
}