html,body {
width:100%;
height:200px;
}
* {
padding:0;
margin:0;
}
body {
background-color:#323232;
}
.content {
width:200px;
height:500px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
/*以上css可不用,仅作为展示外观样式*/
.list {
width:200px;
}
.list ul {
list-style:none;
}
.list>ul>li {
width:100%;
border-bottom:1px solid #666;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}
.list>ul>li p[class=title] {
width:100%;
text-align:center;
background:#EE4977;
height:50px;
line-height:50px;
padding:0;
border:none;
position:relative;
font-size:20px;
}
.list>ul>li p[class=title]>span {
position:absolute;
right:10%;
}
.list-se {
overflow:hidden;
display:none;
}
.list-se>p {
background:#444 !important;
color:#ee4977;
}
.list-se>li {
position:relative;
right:-100%;
-webkit-transition:right .5s;
-moz-transition:right .5s;
-o-transition:right .5s;
transition:right .5s;
}
.list-se>li>p {
background:#3b3b3b;
color:#f0f0f0;
height:50px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-left:10px;
line-height:50px;
border-left:5px solid #3b3b3b;
-webkit-transition:border .5s;
transition:border .5s;
-webkit-transition:background .3s;
transition:background .3s;
}
.list-se>li>p:hover {
border-color:#EE4977;
background:#5b5b5b;
}