JSFiddle - React, Tailwind, and code Playground

by hannes

HTML

<ul class="topnav">
 <li class="button begin"><a href="#">Link 1</a></li>
 <li class="button"><a href="#">Link 2</a></li>
 <li class="button"><a href="#">Link 3</a></li>
 <li class="button end">
     <a class="or" href="#">Add/Remove my CSS class</a>
  <ul class="subnav">
   <li><a href="#"><span class="subnav"></span>Sub 1</a></li>
   <li><a href="#"><span class="subnav"></span>Sub 1</a></li>
   <li><a href="#"><span class="subnav"></span>Sub 1</a></li>
  </ul>
 </li>
</ul>

CSS

html {padding: 10px;font-family:sans-serif;}
ul.topnav {
 list-style: none;
}
  ul.topnav li {
    float: left;
    margin: 0;
    position: relative;
    height: 31px; }
    ul.topnav li.button {
      border-top: 1px solid #dbdee0;
      border-right: 1px solid #b2b4b6;
      border-bottom-style: ridge;
      border-bottom-color: #939597;
      border-bottom-width: 2px; }
      ul.topnav li.button:hover {
        background-color: #dddddd;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), to(#f5f5f6));
        background-image: -moz-linear-gradient(#dddddd, #f5f5f6);
        background-image: -o-linear-gradient(#dddddd, #f5f5f6);
        background-image: linear-gradient(#dddddd, #f5f5f6); }
    ul.topnav li.begin {
      border-left: 1px solid #b2b4b6;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
      -o-border-top-left-radius: 10px;
      -ms-border-top-left-radius: 10px;
      -khtml-border-top-left-radius: 10px;
      border-top-left-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      -webkit-border-bottom-left-radius: 10px;
      -o-border-bottom-left-radius: 10px;
      -ms-border-bottom-left-radius: 10px;
      -khtml-border-bottom-left-radius: 10px;
      border-bottom-left-radius: 10px; }
    ul.topnav li.end {
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -o-border-top-right-radius: 10px;
      -ms-border-top-right-radius: 10px;
      -khtml-border-top-right-radius: 10px;
      border-top-right-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-bottom-right-radius: 10px;
      -o-border-bottom-right-radius: 10px;
      -ms-border-bottom-right-radius: 10px;
      -khtml-border-bottom-right-radius: 10px;
      border-bottom-right-radius: 10px; }
    ul.topnav li a {
      color: #666666;
      font-size: 1em;
      display: inline-block;
      text-decoration: none;
      white-space: nowrap;
     ...

JavaScript

$(document).ready(function() {

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
    $("ul.topnav li a").click(function(e) { //When trigger is clicked...
        e.preventDefault();
        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).addClass("focus");
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
        $(this).parent().hover(function() {}, function() {
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            $("a", this).removeClass("focus");
        })

        //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function() { //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});