JSFiddle - React, Tailwind, and code Playground

Bulletproof CSS3 Dropdown Navigation Menu http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/

by Jennifer Perrin

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie lt-ie7 ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Bulletproof CSS3 Navigation Menu</title>

</head>
<body>
        
    <section class="content">
    
        <header role="banner">
            <img src="http://azadcreative.com/demo/css3-nav-menu/images/menu.png" alt="Select menu" />
        </header>
        
        <nav>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="breakfast active"><a href="#">Breakfast</a>
                <ul>
                    <li class="bread"><a href="#">Bread</a>
                        <ul>
                            <li class="french"><a href="#">French</a></li>
                            <li class="english"><a href="#">White</a></li>
                            <li class="brown"><a href="#">Brown</a></li>
                        </ul>
                    </li>
                    <li class="eggs"><a href="#">Eggs</a>
                        <ul>
                            <li><a href="#">Eggs Benedict</a></li>
                            <li><a href="#">Deviled Eggs</a></li>
                            <li><a href="#">Scotch Eggs</a></li>
                            <li><a href="#">Scrambled Eggs</a></li>
                        </ul>
                    </li>
                    <li class="bacon"><a href="#">Bacon</a>
                        <ul>
                            <li><a href="#">Canadian</a></li>
                            <li><a href="#">Southern</a></li>
                            <li><a href="#">Crisp</a></li>
                        </ul>
                    </li>
                    <li...

CSS

/* Reset.less
 *  Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using  an adapted version here    that cuts out some of the reset HTML elements  we will never need here (i.e., dfn, samp, etc).
 *   -----------------------------------------------------------------------------------------------------------------------  */
html, body {
  margin: 0;
  padding: 0;
}
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,
sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol, ul {
  list-style: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}
html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}
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;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button, input {
  line-height: normal;
  *overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
 ...

JavaScript

$.fn.nav_dropdown = function(options) {
        
            var defaults = {};
            var opts = $.extend(defaults, options);
            
            // Apply class=hasChildren on those items with children
            this.each(function() {
                $(this).find('li').each(function() {
                    if($(this).find("ul").length > 0) {
                        $(this).addClass("hasChildren");                       
                        $(this).find('> a').wrapInner("<span></span>");
                    }
                });    
            });
            
            // Apply class=hover on all list items
            $(this).find("li").hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
            
            $('li').has('ul').hover(function(){
                $(this).children('ul').show();
                
            }, function() {
                $(this).children('ul').hide();
            });    
};


/* On DOM Ready */
$(function() {
    
    $('nav').nav_dropdown();
        
});