JSFiddle - React, Tailwind, and code Playground

by thegje

HTML

<ul id="nav"><li class="home current"><a href="/">Home</a></li><li class="navitem"><a class="navigation" href="/eye-care.aspx">eye care</a></li><li class="navitem "><a class="navigation" href="/contact-lenses.aspx">contact lenses</a><ul class="subnav" style="overflow: hidden;height: 50px;display: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;"><li><a href="/contact-lenses/contact-lens-faq.aspx" style="width: 108px;">contact lens FAQ</a></li><li><a href="/contact-lenses/kids-contact-lenses.aspx" style="width: 108px;">kids contact lenses</a></li></ul></li><li class="navitem"><a class="navigation" href="/glasses.aspx">glasses</a></li><li class="navitem"><a class="navigation" href="/sunglasses.aspx">sunglasses</a><ul class="subnav" style="overflow: hidden;height: 50px;display: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;"><li><a href="/sunglasses/what-to-look-for-in-sunglasses.aspx" style="width: 146px;">What to look for in sunglasses</a></li><li><a href="/sunglasses/kids-sunglasses.aspx" style="width: 146px;">Kids Sunglasses</a></li></ul></li><li class="navitem"><a class="navigation" href="/eye-examination.aspx">eye examination</a></li><li class="navitem"><a class="navigation" href="/news.aspx">News</a></li><li class="navitem"><a class="navigation" href="/blog.aspx">blog</a></li><li class="navitem"><a class="navigation" href="/about.aspx">about</a></li><li class="navitem"><a class="navigation" href="/contact.aspx">contact</a></li><div style="clear:both;"></div></ul>

CSS

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; min-width:1125px;}

::-moz-selection { background: #56004e; color: #fff; text-shadow: none; }
::selection { background: #56004e; color: #fff; text-shadow: none; }



a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0;...

JavaScript

//Bayfields IE hover fix

$(document).ready(function () {
  $('#findIt').hover(function(){
    
    $('ul',this).slideDown(100);
    
  },function(){
    
    $('ul',this).slideUp(100);
    
  });
  
  $('.subnav').each(function(){
        var n = $('li',this).length;
        
        if(n >= 8){
          //display side by side
          $('li:nth-child(odd)',this).css({
            'float' : 'left',
            'clear' : 'both'
          });
          $('li:nth-child(even)',this).css({
            'float' : 'left'
          });
        }
      });
      if($.browser.msie){
        var subnavhover = false;
        var hover = true;
         $('#nav li').hover(
          function () {
              hover = true;
               $(this).addClass('active');
              $(this).addClass('parentHood');
              //show its submenu
              $('ul', this).stop().slideDown(100);
               var maxWidth = Math.max.apply(Math, $('li a',this).map(function(){ return $(this).width(); }).get());
              $('li a',this).width(maxWidth);
          }, 
          function (e) {
              //hide its submenu
            hover = false;
            if(subnavhover === false){
                var ele = this;
              $(ele).removeClass('active');
                  $(ele).removeClass('parentHood');
              setTimeout(function(){
                if(hover == false){
                  $('ul', ele).stop().slideUp(100);
                }
              }/*  ,500  */);
                 
            }
          }
        );
        $('.subnav').hover(function(){
          hover = true;
          $(this).parent().addClass('active');
          $(this).parent().addClass('parentHood');
        },function(){
          
           subnavhover = false;
          
        });
      }else{
          var subnavhover = false;
         $('#nav li').hover(
          function () {
              //show its submenu
              $('ul', this).stop().slideDown(100);
           ...