*{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    font-family: sans-serif; /*字体设置*/
    list-style: none; /*清除默认样式*/
    text-decoration: none; /*文本修饰，(去除下划线)*/
}
body,html{
    min-width: 100%; /*最小宽度*/
    min-height: 100%; /*最大宽度*/
    background:linear-gradient(270deg,#ffffff,#f7f7f7); /*渐变(角度，颜色1，颜色2)*/
}

 /*.middle(中间)，menu(菜单)，item(项)，smenu(子菜单)*/
 .middle{
    position: absolute; /*绝对定位*/
    top:60%; /*距上部*/
    left: 50%; /*距左部*/
    height: 402px;
    overflow: auto;
    /* overflow-y:scroll; /内容溢出的时候只会呼出y滚动条 */
    transform: translate(-50%,-50%); /*移动，此设置为把定位的元素中心作为定位点*/
}
.menu{
    width: 460px; /*宽度*/
    border-radius: 8px; /*圆角*/
    overflow: hidden; /*超出内容隐藏*/
}
.item{
    border-top: 1px solid #b0b0b0bf; /*上边框*/
    overflow: hidden;
}
.btn{
    display: block; /*块元素*/
    padding:  16px 20px; 
    background: #f9f9f9; 
    font-size: 13px;
    color: #0a0a0a; /*字体颜色*/
    position: relative; /*相对定位*/
}
.btn::before{ /*之前添加*/
    content: ""; /*添加内容*/
    position: absolute; /*相对定位*/
    width: 14px; 
    height: 14px;
    background: #323232; 
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg); /*角度旋转*/
}
.btn i{
    margin-right: 10px; /*右外边距*/
}
.smenu{
    background: #ffffff; 
    overflow: hidden; 
    transition:  0.5s; /*动画时间*/
    max-height: 100%; /*最大高度*/
}
.smenu a{
    position: relative; /*相对布局*/
    display: block; /*块元素*/
    padding: 16px 26px; 
    color: #000000; 
    font-size: 14px; /*字体大小*/
    margin: 4px 0;
}
.smenu a::before{ /*之前添加，此处为子菜单a前面的蓝色线条*/
    content: ""; /*内容*/
    position: absolute; /*绝对布局*/
    width: 6px;
    height: 100%;
    background: #676767;
    left:0;
    top:0;
    transition: 0.3s; /*过渡时间*/
    opacity: 0; /*透明度*/
}
.smenu a:hover::before{ /*悬停时*/
    opacity: 1; 
}
.item:target .smenu{ /*匹配:target属性里面的对应id的元素将其设置*/
    max-height: 10em; 
    /*详细内容见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target*/
}