JSFiddle - React, Tailwind, and code Playground

by Arun Unnikrishnan

HTML

<div id = "nav_div">
            <ul id="navigation">
                <li id="home">
                    <a href="#" class="nav_style" id="home_a">Home</a>
                </li>
                <li id="sign_ups">
                    <a href="#" class="nav_style" id="sign_ups_a">Sign-ups</a>
                    <ul class="sub_nav_style" id="sign_ups_sub">
                        <li>
                            <a href="#">Camper Sign-up</a>
                        </li>
                        <li>
                            <a href="#">Junior Counselor Sign-up</a>
                        </li>
                        <li>
                            <a href="#">Counselor Sign-up</a>
                        </li>
                    </ul>
                </li>
                <li id="info">
                    <a href="#" class="nav_style" id="info_a" name="info_a">Information</a>
                    <ul class="sub_nav_style" id="info_sub">
                        <li>
                            <a href="#">Facts You Need</a>
                        </li>
                        <li>
                            <a href="#">Contact Information</a>
                        </li>
                        <li>
                            <a href="#">Vendor Information</a>
                        </li>
                    </ul>
                </li>
                <li id="about_camp">
                    <a href="#" class="nav_style" id="about_camp_a" name="about_camp_a">About Camp</a>
                    <ul class="sub_nav_style" id="about_camp_sub">
                        <li>
                            <a href="#">What People Say</a>
                        </li>
                        <li>
                            <a href="#">Sample Menu</a>
                        </li>
                        <li>
                            <a href="#">Photos</a>
                        </li>
                    </ul>
                </li>
                <li...

CSS

ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
}
a{
    text-decoration:none;
}
#nav_div{
    width:100%;
    height:36px;
    background:#b9bbbd;
    text-align:center;
    z-index:1;
}
ul#navigation{
text-align:center;
float:left;
}
ul#navigation li{
float:left;
min-width:170px;
font-size:13px;
}
ul.sub_nav_style {
position:absolute;
display:none;
padding-top: 10px;

}
ul.sub_nav_style li{
font-family:Tahoma, Geneva, sans-serif;
clear:both;
background:#b9bbbd;
border-bottom:1px solid #999999;
}
ul.sub_nav_style li a{
color:#FFFFFF;
}
a,
a:active,
a:visited {
display:block;
padding:10px;
}
.nav_style{
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
background:#b9bbbd;
color:#FFFFFF;
}
.nav_style:hover{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    background:#114878;
    color:#000000;
}
.nav_style_roll_off{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    background:#b9bbbd;
    color:#114878;
}
.sub_nav_style_bround_roll{
background:#25313d;
}

JavaScript

// JavaScript Document
    $(document).ready(function() {

        //sub rolls sign ups
        $("ul#navigation li#sign_ups ul li:eq(0) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#sign_ups_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#sign_ups ul li:eq(1) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#sign_ups_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#sign_ups ul li:eq(2) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#sign_ups_a").toggleClass("nav_style_roll_off");
        });
        // sup rolls info
        $("ul#navigation li#info ul li:eq(0) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#info_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#info ul li:eq(1) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#info_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#info ul li:eq(2) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#info_a").toggleClass("nav_style_roll_off");
        });
        //sub rolls about_camp
        $("ul#navigation li#about_camp ul li:eq(0) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#about_camp_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#about_camp ul li:eq(1) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
            $("#about_camp_a").toggleClass("nav_style_roll_off");
        });
        $("ul#navigation li#about_camp ul li:eq(2) a").hover(function() {
            $(this).toggleClass("sub_nav_style_bround_roll");
           ...