效果如下：
代码如下：
html:
jQuery手风琴下拉菜单代码 - 站长素材
选择器
- #id
- element
- .class
- *
属性
- attr
- removeAttr
- prop
- removeProp
- addClass
- removeClass
文档处理
- append
- appendTo
- prepend
- prependTo
- after
- before
事件
- ready
- on
- off
- bind
- one
- trigger
- hover
- click
- focus
AJAX
- $.ajax
- $.get
- $.getJSON
- $.getScript
- $.post
效果
- show
- hide
- toggle
- slideDown
- slideUp
- slideToggle
- fadeIn
- fadeOut
- fadeTo
- fadeToggle
- stop
css:
@charset "UTF-8";*{ margin: 0; padding: 0; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 14px;}.list_dt{ background: #333; color: white; width: 120px; padding: 0 40px 0 20px; height: 34px; line-height: 34px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; border-bottom: 1px solid #464646;}.list_dt:hover{ background: #222;}.list_dt:hover ._after{ display: block; width: 3px; height: 100%; position: absolute; left: 0; top: 0; background: #4285F4;}#open{ background: #222;}#open ._after{ display: block; width: 3px; height: 100%; position: absolute; left: 0; top: 0; background: #4285F4;}.list_dt_icon{ position: absolute; right: 10px; top: 9px; display: block; width: 16px; height: 16px; background: url("../images/off.png") no-repeat;}#open .list_dt_icon{ background: url("../images/open.png") no-repeat;}.list_dd{ display: none;}.list_li{ background: #4e4e4e; list-style-type: none; color: white; width: 120px; padding: 0 30px; height: 34px; line-height: 34px; cursor: pointer; border-bottom: 1px solid #6b6b6b;}.list_li:hover{ background: #4285F4;}