手风琴菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴</title>
    <link rel="stylesheet" href="css/07style.css">
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <input type="checkbox" id="checkbox1">
                <label for="checkbox1">洋魔方保障</label>
                <ul>
                    <li>支付宝快捷支付</li>
                    <li>支付宝余额支付</li>
                    <li>新手入门</li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="checkbox2">
                <label for="checkbox2">新手帮助</label>
                <ul>
                    <li>申请支付宝</li>
                    <li>支付宝充值</li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="checkbox3">
                <label for="checkbox3">支付方式</label>
                <ul>
                    <li>支付宝快捷支付</li>
                    <li>支付宝余额支付</li>
                    <li>新手入门</li>
                </ul>
            </li>
             <li>
                <input type="checkbox" id="checkbox4">
                <label for="checkbox4">商家支持</label>
                <ul>
                    <li>洋魔方规则</li>
                    <li>国际招商</li>
                    <li>服务商招募</li>
                    <li>商家系统对接</li>
                    <li>联系我们</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }

ul li {
  list-style: none; }

input {
  display: none; }

.box ul > li {
  position: relative; }

label {
  display: block;
  width: 200px;
  text-indent: 40px;
  background: linear-gradient(#f9f9f9, #e4e4e4, #d4d4d4);
  font: 14px/40px "微软雅黑"; }
  label + ul {
    width: 180px;
    overflow: hidden;
    background: #f5f5f5;
    padding: 10px;
    display: none;
    font: 12px/30px "微软雅黑"; }

label::before {
  content: '-';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: -24px; }

#checkbox1:checked ~ ul {
  display: block; }

#checkbox2:checked ~ ul {
  display: block; }

#checkbox3:checked ~ ul {
  display: block; }

#checkbox4:checked ~ ul {
  display: block; }

#checkbox1:checked + label::before {
  content: '+'; }

#checkbox2:checked + label::before {
  content: '+'; }

#checkbox3:checked + label::before {
  content: '+'; }

#checkbox4:checked + label::before {
  content: '+'; }

/*# sourceMappingURL=07style.css.map */

结果：