html代码:
<body>
<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>
</body>
css代码:
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#conter {
1000px;
margin: auto;
}
#help-left {
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: none;
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, #CCCCCC));
cursor: pointer;
}
.menu summary::-webkit-details-marker {
display: none;
}
/*可用图片或字符,如果使用图片,请把content的值设置成空字符*/
.menu summary:before {
content: "+";
/*background: url(../Images/right.png) no-repeat center center;*/ /*收起时的图片*/
/*vertical-align: middle;*/
display: inline-block;
16px;
height: 16px;
margin-right: 10px;
font-size:18px;
font-weight:700;
}
.menu[open] summary:before {
content: "-";
/*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/
}
.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>