JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div id="container">
    
    <div id="nav">
    
        <ul id="navlist">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Solutions</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    
    </div>
            

        <div class="dropdown">
            
            <div class="columnnav">
                <ul>
                    <li><strong><a href="#">Section One</a></strong><br /></li>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three</a></li>
                    <li><a href="#">Link Four</a></li>
                    <li><a href="#">Link Five</a></li>
                </ul>
            </div>    
            <div class="columnnav">
                <ul>
                    <li><strong><a href="#">Section Two</a></strong><br /></li>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three</a></li>
                    <li><a href="#">Link Four</a></li>
                    <li><a href="#">Link Five</a></li>
                    <li><a href="#">Link Six</a></li>
                    <li><a href="#">Link Seven</a></li>
                </ul>
            </div>    
            <div class="columnnav">
                <ul>
                    <li><strong><a href="#">Section Three</a></strong><br /></li>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three</a></li>
                    <li><a href="#">Link Four</a></li>
                    <li><a href="#">Link Five</a></li>
                    <li><a href="#">Link Six</a></li>
                </ul>
            </div>
            
        </div>
     ...

CSS

/*
jDIV STYLESHEET
A SKYROCKET LABS JQUERY PLUGIN
http://www.skyrocketlabs.com
[email protected]
*/

body {margin: 0; padding: 0; background: #fff; font-family: Arial, sans-serif;}
a{text-decoration: underline; color: #000099;}
a:hover{text-decoration: none; color: #000099;}

#container{width: 1000px; margin: 0px auto;}
#content{padding: 10px 0px;}

#nav{height: 40px; background: #ccc;}
#navlist{margin: 0; padding: 0;}
#navlist li{display: inline; list-style: none; margin: 0; padding: 0;}
#navlist li a{float: left; display: block; background: #555; color: #fff; height: 19px; width: auto; padding: 10px; margin: 0 1px 0 0; border-bottom: 1px solid #fff; text-decoration: none;}
#navlist li a:hover{background: #111; border-bottom: 1px solid #111; text-decoration: underline;}
#navlist li a.active{background: #111; border-bottom: 1px solid #111;}

.columnnav{width: 300px; float: left;}
.columnnav ul, li{display: list-item; list-style: none;}
.columnnav a{color: #fff; text-decoration: none;}
.columnnav a:hover{color: #fff; text-decoration: underline;}

.dropdown{position: absolute; top: 40px; width: 980px; height: auto; color: #fff; padding: 10px; margin:0; background: #111111; display: none; z-index: 100;}

JavaScript

// jDiv - a jQuery plugin
// (c) Skyrocket Labs
// http://www.skyrocketlabs.com
// [email protected]
// Created: 10.24.2009.
// Last updated: 23.05.2011. by roXon 

$(document).ready(function() {

    var countNavs = 0; $('#navlist li').attr('class', function() {countNavs++;return 'connected' + countNavs;}); 
    var countDrops = 0; $('.dropdown').attr('class', function() {countDrops++;return 'dropdown connected' + countDrops;}); 

    var hide1 = false;            
    $("#navlist li").hover(function(){    
        var equal = $(this).attr('class'); 
        
        $('.active').removeClass();
    if (hide1) clearTimeout(hide1);
        $('.dropdown').hide();
        $('.'+equal).not('li').show();
        $(this).children('a').toggleClass('active');                
    }, function() {
        hide1 = setTimeout(function() {$('.'+equal).not('li').hide();});
    });
    
    $('.dropdown').hover(function(){        
        if (hide1) clearTimeout(hide1);            
    }, function() {            
        hide1 = setTimeout(function() {$('.dropdown').hide();});
        $('.active').removeClass();        
        $('.dropdown').stop().show();
    });

});