首先非常感谢网友czqn8的无私分享，此作品一款利用CSS3样式实现的手风琴Accordion菜单特效，效果非常好看，一个页面里面可以使用多次，宽度可以自定义，网友们好好利用哦。。。
页面结构代码如下：
<ul class="accordion">
<li id="one" class="files"> <a href="#one">Jquery学堂<span>495</span></a>
<ul class="sub-menu">
<li><a href="http://www.jq-school.com"><em>01</em>Dropbox<span>42</span></a></li>
<li><a href="http://www.jq-school.com"><em>02</em>Skydrive<span>87</span></a></li>
<li><a href="http://www.jq-school.com"><em>03</em>FTP Server<span>366</span></a></li>
</ul>
</li>
<li id="two" class="mail"> <a href="#two">Mail<span>26</span></a>
<ul class="sub-menu">
<li><a href="http://www.jq-school.com"><em>01</em>Hotmail<span>9</span></a></li>
<li><a href="http://www.jq-school.com"><em>02</em>Yahoo<span>14</span></a></li>
<li><a href="http://www.jq-school.com"><em>03</em>Gmail<span>3</span></a></li>
</ul>
</li>
<li id="three" class="cloud"> <a href="#three">Cloud<span>58</span></a>
<ul class="sub-menu">
<li><a href="http://www.jq-school.com"><em>01</em>Connect<span>12</span></a></li>
<li><a href="http://www.jq-school.com"><em>02</em>Profiles<span>19</span></a></li>
<li><a href="http://www.jq-school.com"><em>03</em>Options<span>27</span></a></li>
</ul>
</li>
<li id="four" class="sign"> <a href="#four">Sign Out</a>
<ul class="sub-menu">
<li><a href="http://www.jq-school.com"><em>01</em>Log Out</a></li>
<li><a href="http://www.jq-school.com"><em>02</em>Delete Account</a></li>
<li><a href="http://www.jq-school.com"><em>03</em>Freeze Account</a></li>
</ul>
</li>
</ul>
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友czqn8 手风琴效果 Accordion 导航菜单 css3 二级菜单 三级联动