demo.html  
<li class="menu">   
<ul>   
<li class="button"><a href="#" class="green">Kiwis <span></span></a></li>  

<li class="dropdown">  
<ul> <!-- Этот список содержит опции, которые выпадают с помощью jQuery -->  

<!-- Каждая опция в своем LI -->  
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>  

<li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr   
Stream</a></li>  
</ul>  
</li>  
</ul>  
</li>

demo.css  
body{  
/* Задаем цвет по умолчанию, фон и шрифт */  
color:#cccccc;  
font-size:13px;  
background: #302b23;  
font-family:Arial, Helvetica, sans-serif;  
}  

ul{  
margin:0;  
padding:0;  
}  

ul.container{  
/* главный UL */  
width:240px;  
margin:0 auto;  
padding:50px;  
}  

li{  
list-style:none;  
text-align:left;  
}  

li.menu{  
/* Главные элементы списка */  
padding:5px 0;  
width:100%;  
}  

li.button a{  
display:block;  
font-family:BPreplay,Arial,Helvetica,sans-serif;  
font-size:21px;  
height:34px;  
overflow:hidden;  
padding:10px 20px 0;  
position:relative;  
width:200px;  
}  

li.button a:hover{  
/* Removing the inherited underline from the titles */  
text-decoration:none;  
}  

li.button a span{  
/* Этот span играет как правая часть фона секции */  
height:44px;  
position:absolute;  
right:0;  
top:0;  
width:4px;  
display:block;  
}  

/* Разные цветовые схемы для разных отделов */  

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}  
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}  

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}  
li.button a.green span{ background:url(img/green.png) repeat-x top right;}  

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}  
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}  

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}  
li.button a.red span{ background:url(img/red.png) repeat-x top right;}  

/* Эффекты при наведении */  

li.button a:hover{ background-position:bottom left;}  
li.button a:hover span{ background-position:bottom right;}  

.dropdown{  
/* Расширяющиеся списки */  
display:none;  
padding-top:5px;  
width:100%;  
}  

.dropdown li{  
/* Каждый элемент в таких списках */  
background-color:#373128;  
border:1px solid #40392C;  
color:#CCCCCC;  
margin:5px 0;  
padding:4px 18px;  
}

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript" src="jquery.easing.1.3.js"></script>  
<script type="text/javascript" src="script.js"></script>

script.js  
$(document).ready(function(){  
/* Скрипт будет выполнен после загрузки страницы */  
/* Смена эффекта для плагина easing */  
$.easing.def = "easeOutBounce";  
$('li.button a').click(function(e){  
/* Находим соответствующий текущей секции список */  
var dropDown = $(this).parent().next();  
/* Закрываем все другие списки, кроме текущего */  
$('.dropdown').not(dropDown).slideUp('slow');  
dropDown.slideToggle('slow');  
e.preventDefault();  
})  
});