html代码:
<dl>
<dt><a href="#">秋秋淘衣坊</a></dt>
<dd>
<ul>
<li><a href="http://qiuqiuyifang.taobao.com" >秋秋</a></li>
<li><a >酒吧\夜店论坛</a></li>
<li><a >福州电影院</a></li>
</ul>
</dd>
<dt><a href="#">秋秋淘衣坊2</a></dt>
<dd>
<ul>
<li><a >房屋出租</a></li>
<li><a >招聘求职</a></li>
<li><a >福州拼车</a></li>
<li><a >二手交易市场</a></li>
</ul>
</dd>
<dt><a href="#">秋秋淘衣坊3</a></dt>
<dd>
<ul>
<li><a >福清论坛</a></li>
<li><a >长乐论坛</a></li>
<li><a >平潭论坛</a></li>
</ul>
</dd>
</dl>
css代码:
body {
font-family: Arial;
font-size: 16px;
}
dl {
width: 300px;
}
dl, dd {
margin: 0;
padding:0;
}
dd {
border:1px solid #ae8758;
}
dt {
background-color:#ae8758;
font-size: 18px;
padding: 5px 5px 5px 20px;
margin:2px 0 0;
height:29px;
line-height:28px;
}
dt a {
color: #FFF;
text-decoration:none;
display:block;
}
dd a {
color: #000;
}
ul {
list-style: none;
padding:5px 5px 5px 20px;
margin:0;
}
li {
line-height:24px;
}
.bg {
background-position:5px -16px;
}
jQuery代码:
$(document).ready(function(){
$("dd").hide();
$("dt a").click(function(){
$(this).parent().next()
.slideToggle().siblings("dd").slideUp();;
})
})
预览效果: