JSFiddle - React, Tailwind, and code Playground

by Neeraj Sonar

HTML

<script src="http://www.jqueryscript.net/demo/Amazon-Like-Multi-Level-Mega-Menu-Plugin-For-jQuery-Amazon-Side-Bar-Menu/amazonmenu.js"></script>
<div>

<div id="mysidebarmenu" class="amazonmenu">
 
<ul id="menu">
    <li>
        <a href="#" class="drop">Home</a><!-- Begin Home Item -->
    </li>
    <li>
        <a href="#" class="drop">About</a>
    </li>
    <li>
        <a href="#" class="drop">Business Process</a> 
     
        <div class="dropdown_5columns"> 
            <div class="col_2">
                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">Leadership</a>
                        <div class="dropdown_1column align_right"> 
                        <div class="col_1_1">
                            <ul>
                                <li><a href="#">ThemeForest</a></li>
                                <li><a href="#">GraphicRiver</a></li>
                                <li><a href="#">ActiveDen</a></li>
                                <li><a href="#">VideoHive</a></li>
                                <li><a href="#">3DOcean</a></li>
                            </ul>  
                        </div> 
                        </div>   
                        
                    </li>
                    <li><a href="#">Strategy</a>
                        <div class="dropdown_1column align_right"> 
                        <div class="col_1_1">
                            <ul>
                                <li><a href="#">GraphicRiver</a></li>
                                <li><a href="#">GraphicRiver</a></li>
                                <li><a href="#">GraphicRiver</a></li>
                                <li><a href="#">GraphicRiver</a></li>
                                <li><a href="#">GraphicRiver</a></li>
                            </ul>  
                        </div> 
                        </div>  
                    </li>
                    <li><a href="#">Marketing</a>
                      ...

CSS

/* Navigation Bar */
 
#menu {
    list-style:none;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
}
 
#menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 10px 5px 10px 20px;
    margin-right:0px;
    margin-top:0px;
    border:none;
}
 
#menu li:hover {
/*    border: 1px solid #777777;*/
    padding: 10px 5px 10px 20px;
    background: #94A6CE;
}
 
#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px; 
    color: #022368;
    display:block;
    outline:0;
    text-decoration:none;
/*    font-weight: bold;*/

}
 
#menu li:hover a {
    color:#fff;
   
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}
 
/* Drop Down */
 
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin: 10px 0px 10px -150px;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    /* Gradient background */
    background:#94A6CE;
}
 
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
 
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}
 
/* Columns */
 
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1_1
 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}.col_1_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
 
/* Right...

JavaScript

jQuery(function(){
	amazonmenu.init({
		menuid: 'mysidebarmenu'
	})
})