JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#">About Us</a> 
        <ul id="i1">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Board of Education</a> 
        <ul id="i2">
            <li><a href="#">Educational Philosophy</a>

            </li>
            <li><a href="#">BOE Monthly Updates</a>

            </li>
            <li><a href="#">Resources</a>

            </li>
            <li><a href="#">BOE Meeting Schedules</a>

            </li>
            <li><a href="#">Minutes 2011-2013</a>

            </li>
            <li><a href="#">Bullying Policy</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Budget Infomation</a> 
        <ul id="i3">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Cancellation Procedures</a> 
        <ul id="i4">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Central Office Directory</a> 
        <ul id="i5">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a> 
        <ul id="i6">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Departments</a> 
        <ul id="i7">
            <li><a href="#">Business Office</a>

            </li>
            <li><a href="#">Pupil Services</a>

            </li>
            <li><a href="#">Food Services</a>

            </li>
            <li><a href="#">Health Services</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Employment Opportunity</a> 
        <ul id="i8">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Transportation</a> 
        <ul id="i9">
            <li></li>
        </ul>
    </li>
    <li><a href="#">Superintendent</a> 
        <ul id="i10">
            <li></li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin: 0;
    Padding: 0;
    list-style-type: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
#nav {
    float: left;
    width: 260px;
    /*border-top: 1px solid #999; 
	border-left: 1px solid #999;*/
}
#nav li a {
    display: block;
    padding: 10px 15px;
    /*border-top: 1px solid #eee;
	border-bottom: 1px solid #999;*/
    text-decoration: none;
    color: #CCC;
    background-color: #006;
}
#nav ul a {
    color: #CCC;
}
#nav li a:hover, #nav li a.active {
    background: #F5E42B;
    color: #006;
}
#nav li ul li a {
    padding: 10px 25px;
    background: #506ab3;
    /*border-bottom: 1px dotted #ccc*/
}
#nav li ul {
    display: none;
    background:#006;
    /* used to hide sub-menus*/
}
#nav li.selected > a {
    background:#ccc !important;
    color:black !important;
}

JavaScript

$("#nav > li").click(function () {
    if ( $(this).hasClass("selected") ) {
        $(".selected").removeClass("selected");
    } else {
        $(".selected").children("ul").slideToggle();
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    }
    $(".selected").children("ul").slideToggle();
});