body { font:14px 微软雅黑,宋体,arial narrow,HELVETICA; } body,ul { margin:0; padding:0; } li { list-style:none; } a { text-decoration:none; } .nav { width:220px; height:calc(100%); background:#263238; transition:all .3s; } #mini { border-bottom:1px solid rgba(255,255,255,.1); } .nav-item { position:relative; } .nav a { display:block; overflow:hidden; padding-left:20px; line-height:46px; max-height:46px; color:#abb1b7; transition:all .3s; } .nav-item>a:before { content:""; position:absolute; left:0; width:2px; height:46px; background:#34a0ce; opacity:0; transition:all .3s; } .nav-show,.nav-item>a:hover { color:#fff; background:rgba(0,0,0,.1); } .nav-show>a:before,.nav-item>a:hover:before { opacity:1; } .my-icon { font-size:16px; font-style:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .nav .nav-icon { font-size:22px; position:absolute; margin-left:-1px; } .nav a span { margin-left:30px; } .icon_1::after { content:"\2648"; } .icon_2::after { content:"\264B"; } .icon_3::after { content:"\2650"; } .nav-more { float:right; margin-right:20px; font-size:18px; transition:transform .3s; } .nav-item ul { display:none; background:rgba(0,0,0,.1); } .nav-mini.nav { width:60px; } .nav-mini.nav .nav-item>a span { display:none; } .nav-mini.nav .nav-more { margin-right:-20px; } .nav-mini.nav .nav-item:hover { background:rgba(255,255,255,.1); } .nav-mini.nav .nav-item:hover ul { display:block; } .nav-mini.nav .nav-item ul { position:absolute; top:0; left:60px; width:180px; z-index:99; background:#3c474c; overflow:hidden; }