CodePen

HTML

            
              <div class="navcontainer">
  <ul class="navlist">    
    <li class="active"><a href="">Physical Wellness <span class="sign">+</span></a>
      
      <ul class="subnavlist">        
        <li class="subactive"><a href="#" id="subcurrent">Nutrition</a></li>      
        <li><a href="#">Exercise</a></li>
        <li><a href="#">Hygiene</a></li>
        <li><a href="#">Sleep</a></li>
        <li><a href="#">Sense Organs</a></li>        
      </ul>
    </li>
    
    <li><a href="#">Intellectual Wellness <span class="sign">+</span></a>
      <ul class="subnavlist">          
        <li><a href="#">Brain</a></li>          
        <li><a href="#">Brain</a></li>          
        <li><a href="#">Brain</a></li>          
        <li><a href="#">Brain</a></li>          
      </ul>
    </li>
    <li><a href="#">Emotional Wellness <span class="sign">+</span></a>
      
      <ul class="subnavlist">            
        <li><a href="#">Perspective</a></li>            
        <li><a href="#">Coping</a></li>            
        <li><a href="#">Empathy</a></li>            
        <li><a href="#">Stuff</a></li>          
      </ul>
    </li>          
    <li><a href="#">Spiritual Wellness <span class="sign">+</span></a>           
      <ul class="subnavlist">              
        <li><a href="#" >Junk</a></li>
        <li><a href="#">Stuff</a></li>              
        <li><a href="#">Items</a></li>              
        <li><a href="#">Menagerie</a></li>              
      </ul>
    </li>          
    
    <li><a href="#">Social Wellness <span class="sign">+</span></a>
      <ul class="subnavlist">
        
        <li><a href="#">Gopher Guts</a></li>                
        <li><a href="#">Monkey Meat</a></li>                
        <li><a href="#">Little Dirty</a></li>                
        <li><a href="#">Birdie Feet</a></li>                
      </ul>
      
    </li>           
    
    <li><a href="#">Occupational Wellness <span class="sign">+</span></a>
      
      <ul class="subnavlist">                
        <li><a href="#">Get</a></li>                  
        <li><a href="#">A</a></li>                  
        <li><a href="#">Job</a></li>                  
        <li><a href="#">Slacker</a></li>        
      </ul>
    </li>             
    
    
    <li><a href="#">Environmental Wellness <span class="sign">+</span></a>
      
      <ul class="subnavlist">                    
        <li><a href="#">So Much</a></li>                    
        <li><a href="#">Work</a></li>                    
        <li><a href="#">To Be</a></li>       
        <li><a href="#">Done</a></li>
        
      </ul>
    </li>
  </ul>              
  
</div>
            
          
!
via HTML Inspector

CSS

            
              .navcontainer {
  width: 200px;
  border: 1px gray solid;
  margin:15px;
}

.navcontainer a {
  display: block;
  text-decoration:none;
}

ul {
  list-style-type: none;
  padding:0;
  margin:5px;
}

.navlist > li a {
font-weight:bold;  
}

li.active > a {
  color:darkgreen;
}

.subnavlist {
  display:none;
}


.subnavlist li a {
  font-weight:normal;
}

.subnavlist li a:hover {
  color:orange;
}

.subnavlist > li.subactive a{
  color:red;
  font-weight:bold;
}
  



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(".navlist>li").click(function(){
 $(this).find(".subnavlist").slideDown(200);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................