<div id="accordion">
  <ul>
    <li class="active">
      <h3><span class="icon-dashboard"></span>Wassup</h3>
    <ul>
      <li><a href="#">Stores</a></li>
      <li><a href="#">Shops</a></li>
      <li><a href="#">Shoppes</a></li>
      <li><a href="#">Tiendas</a></li>
    </ul>
    </li>
    <li>
      <h3><span class="icon-coffee"></span>Drinks</h3>
    <ul>
      <li><a href="#">Coffee</a></li>
      <li><a href="#">Cafe</a></li>
      <li><a href="#">Caffe</a></li>
      <li><a href="#">Te</a></li>
    </ul>
      </li>
    <li>
      <h3><span class="icon-cloud"></span>Shoes</h3>
    <ul>
      <li><a href="#">Sneakers</a></li>
      <li><a href="#">Pumps</a></li>
      <li><a href="#">Sandals</a></li>
      <li><a href="#">Boots</a></li>
    </ul>
    </li>
    <li>
      <h3><span class="icon-check"></span>Clothes</h3>
    <ul>
      <li><a href="#">Shirts</a></li>
      <li><a href="#">Pants</a></li>
      <li><a href="#">Socks</a></li>
      <li><a href="#">Coats</a></li>
    </ul>
    </li>
  </ul>
</div>

<!-- Prefix Free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

/* custom font */
@import url(https://fonts.googleapis.com/css?family=Nunito);

@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);

  
/* Basic Rest */
*{margin:0; padding:0}

body{
  background: #00bbdd;
  font-family: Nunito, arial, verdana, sans-serif;
}

#accordion{
  background: #002244;
  color:white;
  margin:100px auto 0 auto;
  width:333px;
  /* some shadow and glow */
  box-shadow: 5px 5px 20px hsla(344,100%,11%,0.5), 0 0 200px 1px rgba(255, 255, 255, 0.5);
  
}

/* heading styles */
#accordion h3{
  font-size:12px;
  line-height:34px;
  padding:0 10px;
  cursor:pointer;
  background: #003040; /*fallback for browsers not supporting gradients*/
  background:linear-gradient(#005788,#002222)
}
/* List items */
#accordion li {
  list-style-type:none;
}

/* links */
#accordion ul ul li a{
  color:white;
  display:block;
  font-size:11px;
  line-height:27px;
  padding: 0 15px;
  text-decoration:none;
  /* transition for a smooth hove */
  transition: all .1s;
  
}
/* hover effect on header */
#accordion h3:hover{
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/* hover effect */
#accordion ul ul li a:hover{
  background-color: #004978;
  border-left: 5px solid #00ddbb;
}
/* hide non-actives by default */
#accordion ul ul{
  display:none;
}

#accordion li.active ul{
  display:block;
}

/* Icon font styles */
#accordion h3 span{
  font-size:16px;
  padding-right:10px;
}

 $("#accordion h3").click(function(){
    // slide up the list
    $("#accordion ul ul").slideUp("fast");
    // slide down if it is closed
    if(!$(this).next().is(":visible")){
      $(this).next().slideDown("fast")
    }
  })