<div class="show">
		<div class="demo">
			<details open="">
				<summary>
					<dt>订单中心</dt>
				</summary>
				<dd>
					<a href="">我的订单</a>
				</dd>
				<dd>
					<a href="">我的活动</a>
				</dd>
				<dd>
					<a href="">评价晒单</a>
				</dd>
				<dd>
					<a href="">购物助手</a>
				</dd>
			</details>
			<details open="">
				<summary>
					<dt>关注中心</dt>
				</summary>
				<dd>
					<a href="">关注的商品</a>
				</dd>
				<dd>
					<a href="">关注的店铺</a>
				</dd>
				<dd>
					<a href="">关注的专辑</a>
				</dd>
				<dd>
					<a href="">收藏的内容</a>
				</dd>
			</details>
			<details open="">
				<summary>
					<dt>资产中心</dt>
				</summary>
				<dd>
					<a href="">余额</a>
				</dd>
				<dd>
					<a href="">优惠券</a>
				</dd>
				<dd>
					<a href="">礼品卡</a>
				</dd>
			</details>
		</div>
	</div>
body {
  display: flex;
  justify-content: center;
  padding: 2vw;
}
.show{
  padding-bottom:20px;
  min-width: 50vw;
}
.show h5{
  font-size:13px; 
  line-height:20px; 
  padding:10px 0 2px 2px; 
  margin:0 0 0 8px;
}
.demo{
  padding:10px;
}
details {
  margin: 1rem 0;
}
details:active,
details:focus,
summary:active,
summary:focus{
  outline: none 0;
}
/* 隐藏默认三角 */
::-webkit-details-marker {
    display: none;
}
::-moz-list-bullet {
    font-size: 0;
    float: left;
}
summary {
    user-select: none;
    outline: 0;
}
dt::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    margin: 4px 0 0 .5ch;
    background: url(http://www.zhangxinxu.com/study/201801/arrow-on.svg) no-repeat;
    background-size: 100% 100%;
    transition: transform .2s;
}
[open] dt::after {
    transform: rotate(90deg);
}
dd {
	margin: 0;
}
dd > a {
	color: #666;
}

a:hover {
	text-decoration: none;	
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.