kodenya
pasang di mana saja sesuai selera menggunakan widget html adapun kodenya sebagai berikut
penampakannya seperti berikut
<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:275px;
padding:5px;
}
li.accoi-menu{
list-style:none;
padding:1px;
width:100%;}
li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
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{
list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
margin:5px ;
padding:4px 10px;
}
.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Berita Acak</a></li>
<li class="downlistie">
<ul>
ketikan atau copikan script html di sini
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Berita Terbaru</a></li>
<li class="downlistie">
<ul>
ketikan atau copikan script html di sini
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Resep</a></li>
<li class="downlistie">
<ul>
ketikan atau copikan script html di sini
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Kuliner</a></li>
<li class="downlistie">
<ul>
ketikan atau copikan script html di sini
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Freebies</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Blogger templates</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Scripts</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Freebies</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Blogger templates</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Scripts</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Services</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Website Design</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Custom Templates</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >About us</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy policy</a></li>
</ul></li></ul></li>
</ul>
