html
<dl class="list" id="menu">
<dd>
<a href="javascript:;" class="submenu">抗震支架零部件<i></i></a>
<ul class="drop">
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
</ul>
</dd>
<dd>
<a href="javascript:;" class="submenu">抗震支架圖片<i></i></a>
<ul class="drop">
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
<li><a href="" title="">主材</a></li>
</ul>
</dd>
</dl>
CSS
.submenu{display:block;color:#333; padding: 0 20px;height:47px; line-height:47px; font-size: 16px; background-color: #e8ecf7;overflow: hidden; text-align: left;margin:10px;}
.submenu:hover,.submenu.current{background:#ff6f2c; color:#fff; }
.submenu i{display: inline-block;width: 14px;height: 14px;background: url(../images/right1.png);background-size: 100%;float: right;margin-top:17px ;}/*默認箭頭*/
.submenu i.cur{background: url(../images/bottom.png);background-size: 100%;}/*選中時的箭頭*/
.side-menu .drop { width:100%; padding:0 0;margin:0 auto; background-color: #fff; display:none; }
.side-menu .drop li { width:100%; height:45px; line-height:45px; background: #f2f5fd;}
.side-menu .drop a { display:block;margin:6px 30px; color:#666666; white-space:nowrap;
text-overflow: ellipsis; overflow: hidden; font-size: 14px;background: #f2f5fd; text-align: left;}
.side-menu .drop a:hover { color:#000; }
jQuery
$("#menu dd").click(function(){
var $parent = $(this).children('a');
if($parent.hasClass('current')){
$parent.next().slideUp();
$parent.removeClass('current');
$parent.children('i').removeClass("cur");
} else {
$parent.next().slideDown();
$parent.addClass('current');
$parent.children('i').addClass('cur');
$(this).siblings().children('a').removeClass('current');
$(this).siblings().children('a').children('i').removeClass('cur');
$(this).siblings().children('ul').slideUp();
}
});
效果示例圖