JSFiddle - React, Tailwind, and code Playground

by vasanthanvas

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
  <table>
    <tr>
        <td><span class="icon">&#x25BE;</span>&nbsp;<a href="#" class="clicker">Lectures</a>
        <div class="subs">
          <div class="wrp2">
            <ul class="navul">
              <li>
                <h4>Intros</h4>
                <ul>
                  <li><a class=lecture href="lecture00.html">Introduction</a>
                  </li>
                </ul>
              </li>
              <li>
                <h4>Graph<span class="full-nav">&nbsp;Theory</span></h4>
                <ul>
                  <li><a class=lecture href="lecture01.html">Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture02.html">Beyond Euler Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture03.html">Hamiltonian Circuits</a>
                  </li>
                  <li><a class=lecture href="lecture04.html">Travelling Salesmen</a>
                  </li>
                  <li><a class=lecture href="lecture05.html">Minimum Cost&mdash;Spanning Trees</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <td class="gap">&nbsp;
          <td>&equiv;&nbsp;<a href="#">Course<span class="full-nav">&nbsp;Info</span></a>
    </tr>
  </table>
</nav>

CSS

nav {
  background: #f0f7fa;
  color: #85a0ad;
  margin: 40px -38px 0 -38px;
  padding: 10px 38px;
}
nav table {
  border-collapse: collapse;
  width: 100%;
}
nav td {
  padding: 0;
  position: relative;
}
nav > td > a {
  display: block;
  color: #f0f7fa;
  position: relative;
  text-decoration: none;
}
nav > td.selected > a {
  z-index: 2;
}
nav td div {
  position: relative;
}
nav li div {
  position: relative;
}
nav td div div {
  background-color: #f0f0f0;
  padding: 12px 0;
  display: none;
  font-size: 0.95em;
  margin: 0;
  position: absolute;
  top: -1px;
  z-index: 1;
  width: 190px;
}
nav td div div.wrp2 {
  width: 380px;
}
nav .sep {
  left: 190px;
  border-left: 1px solid #044a4b;
  bottom: 0;
  height: auto;
  margin: 15px 0;
  position: absolute;
  top: 0;
  width: 1px;
}
nav td div ul {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  width: 170px;
  float: left;
  list-style-type: none;
}
nav td div ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul {
  padding: 0 0 8px;
}
nav td ul ul li {
  margin: 0;
  padding: 0;
}
nav td ul ul li a {
  color: #044a4b;
  display: block;
  margin-bottom: 1px;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 1.1em;
}
nav td ul ul li a:hover {
  background-color: #85a0ad;
  color: #fff;
}
nav td.gap {
  width: 33%;
}
nav.top {
  margin-top: 0;
}
td.selected span.icon{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display:inline-block;
}

JavaScript

$("nav td a").click(function(e) {
  if ($(this).parent().hasClass('selected')) {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("HERE!");
  } else {
    $("nav .selected div div").slideUp(200);
    $("nav .selected").removeClass("selected");
    //alert("NO HERE");
    if ($(this).next(".subs").length) {
      $(this).parent().addClass("selected");
      $(this).next(".subs").children().slideDown(200);
    }
  }
  e.stopPropagation();
});

$("body").click(function() {
  $("nav .selected div div").slideUp(200);
  $("nav .selected").removeClass("selected");
});