JSFiddle - React, Tailwind, and code Playground

by milesplit

HTML

<nav>
  <h1>World Rankings</h1>
  <ul>
    <li>
      <span>Men</span>
      <ul>
        <li>
          <strong>By Country</strong>
          <a href="#">Men</a>
          <a href="#">Women</a>
        </li>
        <li>
           <strong>By Region</strong>
          <a href="#">Men</a>
          <a href="#">Women</a>
        </li>
        <li>
           <strong>By Continent</strong>
          <a href="#">Men</a>
          <a href="#">Women</a>
        </li>
        <li>
           <strong>World</strong>
          <a href="#">Men</a>
          <a href="#">Women</a>
         </li>
      </ul>
    </li>
    <li>
      <li><span>2012 Outdoor</span>
        <ul>
          <li>
            <strong>2013</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
          <li>
            <strong>2012</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
          <li>
            <strong>2011</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
          <li>
            <strong>2010</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
          <li>
            <strong>2009</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
          <li>
            <strong>2008</strong>
            <a href="#">Outdoor</a>
            <a href="#">Indoor</a>
            <a href="#">XC</a>
            <a href="#">Road</a>
          </li>
        </ul>
      </li>
      <li>
        <span>100m</span>
      <ul>
        <li><a href="#">Show All Events</a></li>
    ...

CSS

p {
  padding: 8px;
}
nav {
  background: #000; color: #fff; position: relative; text-align: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
nav h1 {
 padding: 12px; font-size: 2.5em; font-weight: bold;
}
nav > ul {
  margin:0; padding:0; display: block; height: 32px;
  overflow: hidden; 
}
nav ul li {
  display: inline-block;
  list-style:none;
  padding:0;
  margin:0;
}
nav > ul > li {
  padding-left: 4px;
  padding-right: 4px;
}
nav > ul > li:first-child { padding-left: 8px; }
nav span, nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  line-height: 32px;
  height: 32px;
  padding-left: 8px;
  padding-right: 8px;
}
nav span:after {
  content:" \25be";
}
nav > ul > li:hover > span {
  background: #ddd; color: #000;
}
nav ul li ul {
  display: none;
  background: #ddd; color: #000; 
  left: 0; position: absolute; z-index: 999999;
  width: 100%;
}
nav ul li ul li { border-left: solid 3px #aaa; }
nav ul li ul li:hover { border-left: solid 3px #555; }
nav ul li:hover ul {  display: block; }
nav ul li li { display: table; width: 100%; }
nav ul li li strong, nav ul li li a { display: table-cell; text-align: center; }
nav ul li li a { color: #a00; padding-left: 8px; padding-right: 8px; }
nav ul li li a:hover { text-decoration: underline; }
nav ul li li:hover { background: #ccc; }
nav ul li li strong { font-weight: bold; width: 30%; }

JavaScript

$('a')