CSS部分：

<style type="text/css">
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body { padding:100px;}
input[name='show']{ position:fixed;right:50%; top:50px;}
input[name='hide']{ position:fixed;right:40%; top:50px;}

dl{width:250px;border:1px #333 solid; border-top:0 none;}
dl dt{height:30px; line-height:30px;color:#fff;font-weight:bold;cursor:pointer; background:#333; border-top:1px #fff solid;}
dl dt.unfold{color:#f00;}
dl dd{ background:#999; display:none;}
</style>

HTML部分：

<input name="show" type="button" value="点击测试"/>
<div>
<dl>
<dt>主菜单一</dt>
<dd>1-1</dd>
<dd>1-2</dd>
<dd>1-3</dd>
</dl>
</div>
<div>
<dl>
<dt>主菜单二</dt>
<dd>2-1</dd>
<dd>2-2</dd>
<dd>2-3</dd>
</dl>
</div>
<div>
<dl>
<dt>主菜单三</dt>
<dd>3-1</dd>
<dd>3-2</dd>
<dd>3-3</dd>
</dl>
</div>

jQuery部分：

<script type="text/javascript">
$(function(){
$('input[name="show"]').focus();
$('.menu dt').click(function(){
$(this).toggleClass('unfold').siblings('dd').slideToggle('slow').end()
.parent().parent().siblings().find('dt').removeClass('unfold').siblings('dd').hide();
})
})
</script>