JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<body>
        <div id="top">
                <div id="menu" class="wrap">
                    <ul id="nav">
                        <li><a href="#">My Lists</a>
                            <ul class="drop">
                                <li><a href="#">List 1</a></li>
                                <li><a href="#">List 2</a></li>
                                <li><a href="#">List 3</a></li>
                                <li><a href="#">View all Lists</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Following</a>
                            <ul class="drop">
                                <li><a href="#">Follow 1</a></li>
                                <li><a href="#">Follow 2</a></li>
                                <li><a href="#">Follow 3</a></li>
                                <li><a href="#">View all Follows</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
    </body>

CSS

* {outline:none; border:none; margin:0; padding:0; font:14px arial,sans-serif;}
    body {background: url(images/bg.gif) repeat;}
    #top {background: url(images/top_tile.png) repeat-x; height:140px; width:100%;}
    .wrap {width:980px; margin:0 auto;}
    #top1 {height:60px;}
    .logo {padding-top:10px;}
    #menu {height:48px;}
    /*NAV*/
    #nav{
        list-style:none;
        font-weight:bold;
        /* Clear floats */
        float:left;
        width:100%;
    }
    #nav li{
        float:left;
        margin-right:10px;
        position:relative;
    }
    #nav a{
        display:block;
        padding:20px 25px 7px 15px;
        color:#333;
        height:25px;
        text-decoration:none;
    }
    #nav a:hover{
        color:#fff;
        background:#ff9900;
        text-decoration:none;
    }

    /*--- DROPDOWN ---*/
    #nav ul{
        background:#fff; 
        list-style:none;
        position:absolute;
        left: -9999px; 
        min-width:200px;
        border-radius:0px 0px 3px 3px;
        border:1px solid #ccc;
    }
    #nav ul li{
        padding-top:1px; 
        float:none;
        background:#fff;
        }
    #nav ul a{
        white-space:nowrap; 
        font-size:13px;
        color:#666;
        padding: 10px 0px 5px 15px;
    }
    #nav li:hover ul{ 
        left:0; 
        
    }
    #nav li:hover a{
        background:#ff9900;
        text-decoration:none;
    }
    #nav li:hover ul a{
        text-decoration:none;
        background:#fff;
            
    }
    #nav li:hover ul li a:hover{
        background:#ff9900;
        color:#fff;
    }

JavaScript

$('.drop, #nav, html').on("mousedown", function( e ) {

    if ( $(this).is('.drop, #nav') ) {
        e.stopPropagation();
        return false;
    }
    else {
        $('.drop').hide();
    }
 
    
});

$('li').on({

    mouseenter: function() {
        $('.drop', this).css({ display: 'block', left: 0 });
    }
    mouseleave: function() {
        $('.drop', this).css({ display: 'block', left: -99999 });
    }

});