CodePen

HTML

            
              <div class="wrapper">
  <ul class="sidebar">
    <li ><a  href="#">Home</a>
      <ul id="areaa" >
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>                             
      </ul>
    </li>
    <li><a href="#">About Us</a>
       <ul  id="areab">
         <li><a href="#">Item 4</a></li>
         <li><a href="#">Item5</a></li>
         <li><a href="#">Item6</a></li>                             
       </ul>
    </li>       
    <li><a href="#">Contact Us</a></li>       
    <li><a href="#">Products</a></li>       
    <li><a href="#">Menu</a></li>                   
  </ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Wendy+One);

body {
  background: #79BCD2;
}
.wrapper {
  width: 300px;
  margin: 0 auto;
}
.sidebar {
  padding: .25em;
}
.sidebar li{
      list-style:none;
      background-color: #ececec;
      width:200px;
      padding: .25em 0 0 .25em;
      border-bottom: 1px solid #718ED0;
      overflow: hidden;
      font-family: 'Wendy One', sans-serif;
      font-size: 1.5em;
      }

  .sidebar li ul li{
      background:#fff;
      display:block;
      font-size: .8em;
      }

.sidebar li ul li:last-child {
  border-bottom: none;
}

  .sidebar li ul{
      background:#fff;
      margin-left:-40px;   
      }

  .sidebar li ul li a{
      color:#5769C7;
      display:block;
      }

  .sidebar a{
      text-decoration:none;
      color:#5769C7;
      }

.active a {
  color: #C6535C;
}
  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.sidebar li ul').hide();

$('.sidebar li').click(function(){
  var $this = $(this);
  if (!$($this).hasClass('active')) {
    $($this).addClass('active');
    $('.active ul').slideDown(700);
    if ($($this).siblings('.active')) {
      $('.active').not($this).children('ul').slideUp(700);
      $('.active').not($this).removeClass('active');
    }
  } else {
    $('.active ul').slideUp(700);
    $($this).removeClass('active');
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................