ul{max-height:700px;overflow-y:auto;padding-left:.5rem}ul i,ul span{font-size:1.5rem;border:1px solid #f1f1f1;padding:.2rem;margin:.3rem;cursor:pointer}ul i.active,ul i:hover,ul span.active,ul span:hover{border-radius:2px;border-color:#4a4a48;background-color:#4a4a48;color:#fff;transition:all .3s}ul i.active .icon,ul i.active .icon:after,ul i.active .icon:before,ul i:hover .icon,ul i:hover .icon:after,ul i:hover .icon:before,ul span.active .icon,ul span.active .icon:after,ul span.active .icon:before,ul span:hover .icon,ul span:hover .icon:after,ul span:hover .icon:before{fill:#000;background-color:#fff;transition:all .3s}ul span{display:inline-block;font-size:14px}ul li{list-style:none;float:left;width:5%;text-align:center;cursor:pointer;color:#555;transition:color .3s ease-in-out,background-color .3s ease-in-out;position:relative;margin:3px 0;border-radius:4px;background-color:#fff;overflow:hidden;padding:10px 0 0}