JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li class="drop"><a href="#" class="selected">Parent 02 > </a>
        <ul class="drop1">
            <li class="next" ><a href="#">Item 01></a>
            
            <ul id="subsub">
         
         
         <li><a  href="">Projctx</a></li>
         <li><a  href="">Projcty</a></li>
         <li><a  href="">Projctz</a></li>
         <li><a  href="">Projcta</a></li>
         
         
         </ul>
            <div class="clear"></div>
            </li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li class="drop"><a href="#">Parent 03 > </a>
    <ul class="drop1">
        <li><a href="#">Item 04</a>
       
        
        
        </li>
        <li class="next"><a href="#">Item 05></a>
        
         <ul id="subsub">
         
         
         <li><a  href="">Projct1</a></li>
         <li><a  href="">Projct2</a></li>
         <li><a  href="">Projct2</a></li>
         <li><a  href="">Projct2</a></li>
         
         
         </ul>
        <div class="clear"></div>
        
        </li>
        <li class="next"><a href="#">Item 06></a>
        
         <ul id="subsub">
         
         
         <li><a  href="">Projct10</a></li>
         <li><a  href="">Projct20</a></li>
         <li><a  href="">Projct30</a></li>
         <li><a  href="">Projct40</a></li>
         
         
         </ul>
        
        <div class="clear"></div>
        </li>
        <li class="next"><a href="#">Item 07></a>
        
          <ul id="subsub">
         
         
         <li><a  href="">Projct50</a></li>
         <li><a  href="">Projct60</a></li>
         
         
         
         </ul>
        
        </li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>

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;
        }
        
        #subsub
        
        {
            float:right;
            width:110px;
            height:250px;
            position:absolute;
            background:transparent#000;
            margin-right:60px;
            border-left:#fff solid 1px;
            display:none;}
            
              #subsub li
                {
                    width:100px;
                    float:left;
                    display:block;
                    height:30px;
                    border-bottom:#fff solid 1px;
                    background:none;}
               ...

JavaScript

$(document).ready(function () {    
    
    $('.drop').hover(
        function () {
            //show its submenu
            $(' .drop1', this).slideDown(1000);

        }, 
        function () {
            //hide its submenu
            $('.drop1', this).slideUp(100);            
        }
    );
    
     $('.next').hover(
     function() {
        $('#subsub', this) .css({'marginLeft':'100px', 'marginTop':'-30px'}) .slideDown();
        
         
         
         
         },
         
         function(){
             
            $('#subsub', this) .slideUp(); 
             
             }
     
     );
});