Akordion Menü

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" >$(document).ready(function(){ 
    $('li.title a').click(function(e){ 
        var dropDown = $(this).parent().next(); 
        $('.downlistie').not(dropDown).slideUp('slow'); 
        dropDown.slideToggle('slow'); 
        e.preventDefault(); 
    }) 
}); 
</script> 
<style> 
ul.container{ 
    width:100%; 
    padding:5px;
} 
li.accoi-menu{ 
list-style:none; 
    padding:1px; 
    width:100%; 
    } 
li.title 
{ 
background:#45a2bf; 
list-style:none; 
padding:5px; 
} 
li.title a{ 
color:#fff; 
    display:block; 
padding:5px; 
    font:14px georgia, verdana; 
    overflow:hidden; 
        position:relative; 
    width:100%; 
     text-decoration:none; 
} 
.downlistie{
list-style:none; 
    display:none; 
    padding-top:5px; 
    width:100%; 
} 
.downlistie li{ 
background: #f8f8f8; 
   list-style:none; 
border-top:1px solid #ccc; 
border-bottom:1px solid #ccc; 
border-right:1px solid #ccc; 
border-left:1px solid #ccc;

    margin:5px ; 
    padding:4px 10px;     
}
.downlistie li:hover { 
background: #63beda; 
} 
.downlistie li a{ 
{ 
font:14px georgia, verdana; 
text-decoration:none; 
color:#333; 
} 
.downlistie li a:hover { 
text-decoration:none; 
color:#333; 
} 
</style> 
<ul class="container"> 
<li class="accoi-menu"> 
<ul> 
<li class="title"><a href="#" >Sayfalar</a></li>             
<li class="downlistie"> 
<ul> 
<li><a href='#'>Ana Sayfa</a></li> 
<li><a href='#'>Hakkımızda</a></li>
<li><a href='#'>Gizlilik Politikamız</a></li>
<li><a href='#'>Destek Ol</a></li>
<li><a href='#'>İletişim</a></li>
<li><a href='#'>Yasal Uyarı</a></li>
</ul></li></ul></li> 
<li class="accoi-menu"> 
<ul> 
<li class="title"><a href="#" >Bilgi Cafem61</a></li> 
<li class="downlistie"> 
<ul> 
<li><a href='#'>Alt başlık</a></li> 
</ul></li></ul></li> 
</ul>