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 !important;    
  color: #006;}
 #nav li ul {    
  display: none; /* used to hide sub-menus*/}
#nav li ul li a {    
  padding: 10px 25px;    
  background: #506ab3;    
  /*border-bottom: 1px dotted #ccc*/
 }

#nav li.active > a {
    color: #000;
    background: #ccc;
}

JavaScript

function initMenu() {
  $('#nav ul').hide();
  /*$('#nav ul:first').show();*/
  $('#nav li a').click(
    function() {
      // Here I removed the "active" class from all siblings "li"
      $(this).parent().siblings().removeClass("active");
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return true;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#nav ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
          
        // Here I add the "active" class to this "li"
        $(this).parent().addClass("active");
        return true;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

$('#body').ready(function(){
                var URL = location.pathname.split("/");
				URL = URL[URL.length-1];
               //<![CDATA[
                for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                    if((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))){
                        $('#nav ul:visible').slideUp('normal');
                        $('#i'+i).slideDown(0);
						$('#i'+i).find('li').each(function(){
							var current = $(this).find('a')[0];
							if(current.href == window.location.href)
								current.style.backgroundColor = "#ccc";
								current.style.color = "#006";

                    });
                }
			}
            });