<script src="http://geoload.in/html-2/menu_1/js/jquery-1.7.1.min.js"></script>  
<script src="http://geoload.in/html-2/menu_1/js/prefixfree-1.0.7.js"></script>  
<script>  
$(document).ready(function(){  
  $("#accordian h3").click(function(){  
  $("#accordian ul ul").slideUp();  
  if(!$(this).next().is(":visible"))  
  {  
  $(this).next().slideDown();  
  }  
  })  
})  
</script>
<style>
@import url(http://fonts.googleapis.com/css?family=Nunito);  
#accordian {  
  background: #004050;  
  width: 240px;  
  margin: 100px auto 0 auto;  
  color: white;  

  box-shadow:  
  0 5px 15px 1px rgba(0, 0, 0, 0.6),  
  0 0 200px 1px rgba(255, 255, 255, 0.5);  
}  

#accordian h3 {  
  font-size: 12px;  
  line-height: 34px;  
  padding: 0 10px;  
  cursor: pointer;  
  background: #003040;  
  background: linear-gradient(#003040, #002535);  
}  

#accordian h3:hover {  
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);  
}  
#accordian h3 span {  
  font-size: 16px;  
  margin-right: 10px;  
}  

#accordian li {  
  list-style-type: none;  
}  
   
#accordian ul ul li a {  
  color: white;  
  text-decoration: none;  
  font-size: 11px;  
  line-height: 27px;  
  display: block;  
  padding: 0 15px;  

  transition: all 0.15s;  
}  

#accordian ul ul li a:hover {  
  background: #003545;  
  border-left: 5px solid lightgreen;  
}  

#accordian ul ul {  
  display: none;  
}  
#accordian li.active ul {  
  display: block;  
}
  </style>
<div id="accordian">  
  <ul>  
  <li>  
  <h3><span class="icon-dashboard"></span>Dashboard</h3>  
  <ul>  
  <li><a href="#">Reports</a></li>  
  <li><a href="#">Search</a></li>  
  <li><a href="#">Graphs</a></li>  
  <li><a href="#">Settings</a></li>  
  </ul>  
  </li>  
  <li class="active">  
  <h3><span class="icon-tasks"></span>Tasks</h3>  
  <ul>  
  <li><a href="#">Today's tasks</a></li>  
  <li><a href="#">Urgent</a></li>  
  <li><a href="#">Overdues</a></li>  
  <li><a href="#">Recurring</a></li>  
  <li><a href="#">Settings</a></li>  
  </ul>  
  </li>  
  <li>  
  <h3><span class="icon-calendar"></span>Calendar</h3>  
  <ul>  
  <li><a href="#">Current Month</a></li>  
  <li><a href="#">Current Week</a></li>  
  <li><a href="#">Previous Month</a></li>  
  <li><a href="#">Previous Week</a></li>  
  <li><a href="#">Next Month</a></li>  
  <li><a href="#">Next Week</a></li>  
  <li><a href="#">Team Calendar</a></li>  
  <li><a href="#">Private Calendar</a></li>  
  <li><a href="#">Settings</a></li>  
  </ul>  
  </li>  
  <li>  
  <h3><span class="icon-heart"></span>Favourites</h3>  
  <ul>  
  <li><a href="#">Global favs</a></li>  
  <li><a href="#">My favs</a></li>  
  <li><a href="#">Team favs</a></li>  
  <li><a href="#">Settings</a></li>  
  </ul>  
  </li>  
  </ul>  
</div>