JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02 > </a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03 > </a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>

CSS

body {font-family:arial; font-size:11px;}
    
    /* remove the list style */
    #nav {
        margin:0; 
        padding:0; 
        list-style:none;
    }    
    
        /* make the LI display inline */
        /* it's position relative so that position absolute */
        /* can be used in submenu */
        #nav li {
            float:left; 
            display:block; 
            width:100px; 
            background:#ccc; 
            position:relative;
            z-index:500; 
            margin:0 1px;
        }
        
        /* this is the parent menu */
        #nav li a {
            display:block; 
            padding:8px 5px 0 5px; 
            font-weight:700;  
            height:23px; 
            text-decoration:none; 
            color:#fff; 
            text-align:center; 
            color:#333;
        }

        #nav li a:hover {
            color:#fff;
        }
    
        /* you can make a different style for default selected value */
        #nav a.selected {
            color:#f00;
        }
    
        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none;
        }
        
        #nav ul li {
            width:100px; 
            float:left; 
            border-top:1px solid #fff;
        }
        
        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;  
            height:15px;
            padding: 8px 5px; 
            color:#666;
            background-color:#09F;
        }
        
        #nav ul a:hover {
            text-decoration:underline;    
        }

        /* fix ie6 small issue */
        /* we should always avoid using hack like this */
        /* should put it into separate file : ) */
        *html #nav ul {
            margin:0 0 0 -2px;
        }

JavaScript

$(document).ready(function () {    
    
    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(1000);

        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);            
        }
    );
    
});