树形菜单html5新特性,HTML5 details/summary树形菜单效果 » 张鑫旭-鑫空间-鑫生活

CSS代码：

/* 隐藏默认三角 */

::-webkit-details-marker {

display: none;

}

::-moz-list-bullet {

font-size: 0;

float: left;

}

details {

padding-left: 20px;

}

summary::before {

content: '';

display: inline-block;

width: 12px; height: 12px;

border: 1px solid #999;

background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;

background-size: 2px 10px, 10px 2px;

vertical-align: -2px;

margin-right: 6px;

margin-left: -20px;

}

[open] > summary::before {

background: linear-gradient(to right, #999, #999) no-repeat center;

background-size: 10px 2px;

}

HTML代码：

我的视频

爆肝工程师的异世界狂想曲

tv1-720p.mp4

tv2-720p.mp4

...

tv10-720p.mp4

七大罪

七大罪B站00合集.mp4

珍藏动漫网盘地址.txt

我们的小美好.mp4