本教程教大家使用纯html5加css3实现纵向折叠式导航菜单效果，不使用任何js，也不用任何图片即可实现的效果，非常棒，使用也很方便。
直接上代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3+html5实现纵向折叠式导航菜单效果</title>
<style>
*{margin:0;padding:0}
a{text-decoration:none}
#conter{width:1000px;margin:auto}
#help-left{width:200px;font-family:'microsoft YaHei';float:left}
.menu{border-left:1px solid #ccc;border-right:1px solid #ccc}
.menu:last-child{border-bottom:1px solid #ccc}
.menu summary{height:40px;line-height:40px;text-indent:10px;outline:0;font-size:14px;font-weight:700;border-top:1px solid #ddd;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FEFEFE),color-stop(1,#CCC));cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary:before{content:"+";display:inline-block;width:16px;height:16px;margin-right:10px;font-size:18px;font-weight:700}
.menu[open] summary:before{content:"-"}
.menu ul{padding:10px 0}
.menu ul li{list-style:none;text-indent:25px;font-size:12px;height:30px;line-height:30px}
.menu ul li a{display:block;color:#666}
.menu ul li a:hover{text-decoration:underline}
</style>
</head>
<body>
<!--代码部分begin -->
<section id="conter">
<section id="help-left">
<details class="menu" open>
<summary>洋魔坊保障</summary>
<ul>
<li><a href="#">正品保障</a></li>
<li><a href="#">海外直供</a></li>
</ul>
</details>
<details class="menu" open>
<summary>新手帮助</summary>
<ul>
<li><a href="#">申请支付宝</a></li>
<li><a href="#">支付宝充值</a></li>
</ul>
</details>
<details class="menu" open>
<summary>支付方式</summary>
<ul>
<li><a href="#">支付宝快捷支付</a></li>
<li><a href="#">支付宝余额支付</a></li>
<li><a href="#">新手入门</a></li>
</ul>
</details>
<details class="menu" open>
<summary>商家支持</summary>
<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>
</details>
</section>
<section id="help-right"></section>
</section>
<!--代码部分end -->
</body>
</html>
