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

JavaScript

function initMenu() {
  $('#nav ul').hide();
  /*$('#nav ul:first').show();*/
  $('#nav li a').click(
    function() {
      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');
        return true;
        }
      }
    );
  }
$(document).ready(function() {console.log('ready global started'); initMenu();});

$('#body').ready(function(){
        var URL = location.pathname.split("/");
        
    	URL = URL[URL.length-2];
        //<![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(idx, ex) {
                        var current = $(ex).find('a');
                        if ((i==2) || (current.attr('href') == window.location.href)) {
                            current.css({
                                  backgroundColor: '#ccc'
                                , color:           '#006'
                            });
                            $('#i'+i).prev('a').css({
                                  backgroundColor: '#ccc'
                                , color:           '#006'
                            });
                        }
                    });
            }
        }
    });