<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
</body>
</html>
2、效果：
四、可同时折叠的手风琴菜单
1、代码：
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS3手风琴菜单</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />
<label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label>
<ul class="options">
<li><a href="#"><i aria-hidden="true" class="icon-search"></i> Find New Friends</a></li>
<li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>
<li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item2" />
<label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label>
<ul class="options">
<li><a href="#"><i aria-hidden="true" class="icon-movie"></i> My Videos <span>7</span></a></li>
<li><a href="#"><i aria-hidden="true" class="icon-download"></i> My Downloaded Videos <span>3</span></a></li>
<li><a href="#"><i aria-hidden="true" class="icon-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item3" />
<label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label>
