JSFiddle - React, Tailwind, and code Playground
by Neeraj Sonar
HTML
<script src="http://www.javascriptkit.com/script/script2/amazonmenu.js"></script>
<nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Business Processes</a>
<div id="mega" style="">
<ul>
<div id="mysidebarmenu" class="amazonmenu">
<ul>
<li class="hassub selected"><a href="#">Leadership</a>
<div class="ie-menu-first" style="display : block !important;">
<ul>
<li class="hassub selected"><a href="#">Leadership 1 </a>
<div class="lst-lvl" style="display : block !important">
<ul>
<li><a href="#">Leadership 1.1</a></li>
<li><a href="#">Leadership 1.2</a></li>
<li><a href="#">Leadership 1.3</a></li>
<li><a href="#">Leadership 1.4</a></li>
</ul>
</div>
</li>
<li><a href="#">Leadership 2</a>
<div class="lst-lvl" style="display : block !important;">
<ul>
<li><a href="#">Leadership 2.1</a></li>
<li><a href="#">Leadership...
CSS
*{
margin:0 auto;
font-family:Trebuchet MS;
}
#wrapper {
width: 980px;
min-height: 600px;
margin: 0 auto;
/*z-index: 99;*/
}
nav {
position: relative;
width: 980px;
height: 50px;
margin: 0 auto;
}
header, nav {
display: block;
}
nav ul#menu {
display: block;
margin: 0;
padding: 0;
list-style: 0;
}
nav ul#menu li {
position: relative;
display: inline-block;
}
nav ul#menu li a {
display: block;
height: 50px;
font-size: 16px;
line-height: 50px;
color: #4d6394;
text-decoration: none;
padding: 0 12px;
/* font-weight: bold;*/
}
nav ul#menu li a:hover, nav ul#menu li:hover > a {
color: #0005cc;
background-color: #94A6CE;
}
nav ul#menu li:hover > #mega {
display: block;
}
nav ul#menu li #mega {
/* display: block;*/
}
#mega {
position: absolute;
top: 100%;
left: -150px;
width: 820px;
height: auto;
padding: 20px 30px;
background: #94A6CE;
display: none;
}
ul#menu ul {
float: left;
margin: 0 2% 15px 0;
padding: 0;
list-style: none;
}
ul#menu ul li {
display: block;
}
ul#menu ul li a {
float: left;
display: block;
width: 100%;
height: auto;
line-height: 1.3em;
color: #FFFFFF;
text-decoration: none;
padding: 3px 0;
font-size: 13px;
font-weight: bold;
}
ul#menu ul li a:hover {
color: #0005cc;
background: none;
font-weight: bold;
}
ul#menu ul li:first-child a:hover {
color: #0005cc;
font-weight: bold;
}
/* clearfix */
nav ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
nav ul {
display: inline-block;
}
html[xmlns] nav ul {
display: block;
}
* html nav ul {
height: 1%;
}
#content {
padding: 4% 0;
width:960px;
height: 1000px;
/* border:1px black solid;*/
background-color: #FFFFFF;
margin-top: 10px;
}
/************************ amazon menu ********************/
.amazonmenu ul{
font: normal 12px Verdana;
list-style: none;
margin:...
JavaScript
jQuery(function(){
amazonmenu.init({
menuid: 'mysidebarmenu'
})
})