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;
}
效果图如下