link Font Awesome : http://fortawesome.github.

io/Font-Awesome/
CSS :
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
JQUERY :
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion ul:eq(0)').show();
HTML :
<ul id="accordion">
<li><div>Makanan</div>
<ul>
<li><a href="#">Soto</a></li>
<li><a href="#">Bakso</a></li>
<li><a href="#">Mie Ayam</a></li>
</ul>
</li>

<li><div>Minum</div>
<ul>
<li><a href="#">Es Teh</a></li>
<li><a href="#">Es Jeruk</a></li>
<li><a href="#">Es Campur</a></li>
</ul>
</li>
<li><div>Buah</div>
<ul>
<li><a href="#">Jeruk</a></li>
<li><a href="#">Apel</a></li>
<li><a href="#">Mangga</a></li>
</ul>
</li>
</ul>