JSFiddle - React, Tailwind, and code Playground
HTML
<div id="nav">
<ul>
<li><a href="#" class="bt">File</a>
</li>
<li><a href="#" class="bt">Action</a>
</li>
<li><a href="#" class="bt">Modules</a>
</li>
<li><a href="#" class="bt">Reports</a>
</li>
<li><a href="#" class="bt">Help</a>
</li>
</ul>
</div>
<div class="link_holder">dfdsafdsafdsa</div>
<div class="quick_links"></div>
CSS
#nav {
min-height:27px;
background:url(../images/nav_bg.jpg) repeat-x #afc1d8;
clear:both;
border-bottom:solid 1px #8f9eb0
}
#nav ul {
margin:0 0 0 50px;
}
#nav li {
float:left;
}
#nav li .bt {
color:#253c46;
text-decoration:none;
padding:5px 15px;
border-right:solid 1px #6f86a4;
float:left;
}
#nav li .bt:hover {
color:#97a3b3;
background:url(../images/nav_bg_H.jpg) repeat-x;
}
#nav li .clicked {
text-decoration:none;
padding:5px 15px;
border-right:solid 1px #6f86a4;
float:left;
color:#97a3b3;
background:url(../images/nav_bg_H.jpg) repeat-x;
}
.link_holder {
background:url(../images/sub_menu.jpg) repeat-x;
height:138px;
clear:both;
display:none;
}
.quick_links {
background:#C4C4C4;
clear:both;
min-height:30px;
}
JavaScript
$(document).ready(function (e) {
$("#nav li a").click(function () {
if ($(this).hasClass("bt")) {
$("*").addClass("bt");
$(this).removeClass("bt");
$("*").removeClass("clicked");
$(this).addClass("clicked");
$(".link_holder").slideUp();
$(".link_holder").slideDown();
} else {
$(this).removeClass("clicked");
$(this).addClass("bt");
$(".link_holder").slideUp();
}
});
});