JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<section class="header-menu">
<ul class="main-ul">
<li class="active active-current main-li-class"><a href="home.html">Home</a></li>
<li class="main-li-class"><a href="#">How It Works</a></li>
<li class="main-li-class"><a href="#">Subscribe</a></li>
<li class="main-li-class"><a href="#">Guestbook</a></li>
<li class="main-li-class"><a href="#">Contact Us</a></li>
<li class="main-li-class" id="past-events"><a href="#past-events" data-toggle="dropdown">Past Events</a>
<ul class="dropdown-menu">
<li id="past-events-year1"><a href="#" class="trigger right-caret">2010</a>
<ul class="dropdown-menu sub-menu" style="top: -4px;">
<li><a href="#">Jan</a></li>
<li><a href="#">Feb</a></li>
<li><a href="#">Mar</a></li>
<li><a href="#">Apr</a></li>
<li><a href="#">May</a></li>
<li><a href="#">Jun</a></li>
<li><a href="#">Jul</a></li>
<li><a href="#">Aug</a></li>
<li><a href="#">Sep</a></li>
<li><a href="#">Oct</a></li>
<li><a href="#">Nov</a></li>
<li><a href="#">Dec</a></li>
</ul>
</li>
<li id="past-events-year2"><a href="#" class="trigger right-caret">2011</a>
<ul class="dropdown-menu sub-menu" style="top: -28px;">
<li><a href="#">Jan</a></li>
<li><a href="#">Feb</a></li>
<li><a href="#">Mar</a></li>
<li><a href="#">Apr</a></li>
<li><a href="#">May</a></li>
<li><a href="#">Jun</a></li>
<li><a href="#">Jul</a></li>
<li><a href="#">Aug</a></li>
<li><a href="#">Sep</a></li>
<li><a href="#">Oct</a></li>
<li><a href="#">Nov</a></li>
<li><a...
CSS
* { padding: 0px; margin: 0px; }
body { background: white; overflow-x: hidden; background-color: #CCCCCC; }
img { max-width: 100%; height: auto; }
@font-face {
font-family: 'MaiandraGD-Regular';
src: url('../fonts/MaiandraGD-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/MaiandraGD-Regular.woff') format('woff'), url('../fonts/MaiandraGD-Regular.ttf') format('truetype'), url('../fonts/MaiandraGD-Regular.svg#MaiandraGD-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2, h3 { font-family:'MaiandraGD-Regular',arial,sans-serif; font-weight: bold; color: black; }
h4, h5, h6 { font-family:arial,sans-serif; }
p { color: #333; font-weight: bold; font-family:arial,sans-serif; }
a { color: #000080; text-decoration: underline; font-family:arial,sans-serif; }
a:link { color:#000080; text-decoration:underline; }
a:visited { color:#800080; text-decoration:underline; }
a:hover { color:#ff0000; text-decoration:underline; }
a:active { color:#ff0000; text-decoration:underline; }
.image-container {
position: relative;
padding-bottom: 23.896103896%; /* ratio of image height to width */
height: 0;
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.stcroix-container {
width: 770px;
margin: auto;
}
ul {
border: 2px solid #990000;
width: 100%;
background-color: #FFCC00;
list-style: none;
display: inline-block;
margin: 0px;
}
li {
float: left;
position: relative;
padding: 8px 18px;
}
li > a { color: #990000 !important; text-decoration: none !important; }
li > a:hover { color: white !important; }
.admin { color: black !important; }
.active > a {
color: #ffffff !important;
text-decoration: underline;
}
.active { background-color: #990000 !important; }
.active-current > a {
color: #ffffff !important;
text-decoration: underline;
}
.active-current { background-color: #990000 !important; }
.stcroix-content {
background-color: white;
margin-top: -5px;
padding:...
JavaScript
$(function(){
$(".main-li-class").on("mouseover", function() {
$('.main-li-class>a').attr('style', 'color: #990000;');
$('.main-li-class').attr('style', 'background:#FFCC00');
$('.main-li-class').removeClass('active');
//$(this).find('a').attr('style', 'color: #990000; background:#990000');
$(this).addClass('active');
});
$(".main-li-class").on("mouseleave", function() {
$(this).removeClass('active');
});
$("#past-events").on("mouseover", function() {
$('.dropdown-menu').show();
$('#past-events > a').parent().css('background', '#990000');
$('#past-events > a').attr('style', 'color:white !important');
});
$("#past-events").on("mouseleave", function() {
$('.dropdown-menu').hide();
$('#past-events > a').parent().css('background', '#FFCC00');
$('#past-events > a').attr('style', 'color:#990000 !important');
});
$(".trigger").on("mouseover",function() {
$('.trigger').parent().css('background', '#FFCC00');
$('.trigger').attr('style', 'color:#990000 !important');
$(this).parent().css('background', '#990000');
$(this).attr('style', 'color:white !important');
});
$(".dropdown-menu > li > a.trigger").on("mouseover",function(e){
var current=$('.dropdown-menu > li > a.trigger').next();
var grandparent=$('.dropdown-menu > li > a.trigger').parent().parent();
if($('.dropdown-menu > li > a.trigger').hasClass('left-caret')||$('.dropdown-menu > li > a.trigger').hasClass('right-caret'))
$('.dropdown-menu > li > a.trigger').toggleClass('right-caret left-caret');
grandparent.find('.left-caret').toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").hide();
//grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
//grandparent.find(".sub-menu:visible").not(current).hide();
current.fadeIn(200);
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("mouseover",function(){
var...