向下滚动页面查看效果
#menu {
width:32px;
height:360px;
position:fixed;
top:200px;
left:0px;
display:none;
}
#menu ul li {
width:32px;
height:32px;
list-style-type:none;
color:#8F8583;
text-align:center;
line-height:32px;
border-bottom:1px dotted #ddd;
position:relative;
}
#menu ul li span {
display:block;
width:32px;
height:32px;
background:#C81623;
position:absolute;
top:0;
left:0;
color:#fff;
font-size:12px;
display:none;
}
#menu ul li:hover span {
display:block;
}
#menu ul li span.active {
color:#C81623;
background:#fff;
display:block;
}
#content {
width:1220px;
margin:0 auto;
}
#footer {
width:1220px;
height:600px;
background:#FE7678;
}
.container {
margin:0 auto;
}
根据高度比例达到效果