CSS3手风琴效果，使用到的是CSS3里面新的属性：:target和:checked
因而从这两种属性出发我们可以制作两种方案。
第一种：:target
<section>
<ul>
<li id="one"><a href="#one">我的朋友 </a>
<ul>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
</ul>
</li>
<li id="two"><a href="#two">我的邻居</a>
<ul>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Automatic Fails </a></li>
<li><a href="#">Strange “Stuff” </a></li>
<li><a href="#">Cute Kittens </a></li>
<li><a href="#">Strange “Stuff” </a></li>
</ul>
</li>
<li id="three"><a href="#three">我的应用</a>
<ul>
<li><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li id="five"><a href="#five">我的机器</a>
<ul>
<li><a href="#">Cute Kittens</a></li>
<li><a href="#">Strange “Stuff”</a></li>
<li><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>
.menu ul{line-height:30px;display:none;overflow:hidden;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;transition:all .5s linear}
.menu li:target ul{display:block;border-top:1px solid #3d3d3d;box-shadow:0 1px 0 #888 inset}
关键代码就是上面这两句了，当然<a href="#five">我的机器</a>这个链接是可以随便你放在那个地方的，不必说必须放在这个ID的后面，放在这个锚点的前面也是OK的。也不用UL、LI这种方式，随便你弄，只要保证这个点击的地址对于于一个ID就行了。
第二种：:checked
<div>
<label for="list1">我的同学</label>
<input type="radio" name="list" id="list1" checked="chekced"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list2">我的同学</label>
<input type="radio" name="list" id="list2"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list3">我的同学</label>
<input type="radio" name="list" id="list3"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
<label for="list4">我的同学</label>
<input type="radio" name="list" id="list4"/>
<ul>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
<li><a href="">同学名字</a></li>
</ul>
</div>
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear;
-moz-transition:all .5s linear;
-ms-transition:all .5s linear;
-o-transition:all .5s linear;
transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
这个:checked就有一定的限制了，那就是需要改变的元素必须在input[type="checkbox"]或者input[type="radio"]之后，否则就会找不到目标哦。
这个是怎么弄的呢？就是通过点击label相应的选中从而来展开或者伸缩菜单的。
同理上面的#list1:checked + ul{display: block;} 的加号你也可以 改成其他的css形式，关键就是要和其他的对应到相关的元素同时不要影响到其他元素就行了。