导航条 side-bar

html

<div class="sidebar-menu">        <ul class="main-menu ">            <li class="active">                <a href="/student/" target=""><i class="fa fa-home icon-setting"></i>li1</a>            </li>            <li class="second-menu" id="second-menu1">                <a href="javascript:void(0)">                    <i class="fa fa-info  icon-setting"></i>li2                    <i class="fa fa-caret-down icon-more"></i>                </a>                <ul>                    <li><a href="#" target=""><i class="fa icon-setting">-</i>li2-1</a></li>                    <li><a href="/student/change-password/" target=""><i class="fa icon-setting">-</i>li2-</a></li>                </ul>            </li>        </ul></div>

CSS

body {    font-family: "Microsoft YaHei";    color: black;    min-width: 1000px;}.highlight {    background: #8ECB8D;}.sidebar-menu {    position: absolute;    width: 256px;    left: 0;    top: 0;    bottom: 0;    background-color: #66afe9;}.header {    color: white;    padding-top: 20px;    height: 60px;}.logo {    padding-left: 40px;    float: left;}.sidebar-hide {    padding-right: 40px;    float: right;}.main-menu {    padding: 0;    margin-top: 20px;}.main-menu ul {    padding-left: 0;    list-style-type: none;}.main-menu li {    text-align: center;    padding: 0;    margin: 0;    line-height: 56px;    list-style-type: none;    position: relative;    border-bottom: 1px solid #669ed8;}.second-menu ul {    display: none;}.second-menu li {    line-height: 56px;    border-bottom: 1px solid #669ed8;    border-top: 1px solid rgba(0, 0, 0, 0.1);    background-color: #669ed8;}li a, .header a {    color: white;    width: 256px;}li:hover {    color: blue;    cursor: pointer;    text-decoration: none;    /*font-weight: bold;*/}li a:hover i {    color: blue;    text-decoration: none;}.icon-setting {    padding-right: 20px;    text-align: center;    width: 40px;    color: white;}.icon-more {    position: absolute;    right: 10px;    color: white;    padding-top: 24px;}.main-content {    margin-left: 286px;    margin-right: 30px;    margin-top: 0;}.main-show {    /*width: 100%;*/    min-height: 540px;    padding-top: 20px;}.form-control {    border-radius: 0;}.btn {    border-radius: 0;}option {}.footer {    position: fixed;    text-align: center;    left: 286px;    right: 0;    bottom: 10px;    margin-left: auto;    margin-right: auto;    color: gray;}

效果图如下