html中如何实现左侧菜单栏,CSS实现左侧菜单工具栏

* {

margin:0;

padding:0

}

body {

height:3000px;

}

.rgnotice {

position:fixed;

top:28%;

right:0;

background-color:#C2C2C2;

-webkit-box-shadow:-5px 5px 8px #EBEBEB;

-moz-box-shadow:-5px 5px 8px #EBEBEB;

-o-box-shadow:-5px 5px 8px #EBEBEB;

-ms-box-shadow:-5px 5px 8px #EBEBEB;

box-shadow:-5px 5px 8px #EBEBEB;

}

.rgnotice ul {

list-style:none;

width:55px;

}

.rgnotice ul li {

height:50px;

text-align:center;

cursor:pointer;

}

.rgnotice ul li:hover {

background-color:#DBDBDB

}

.rgnotice hr {

border:0.5px solid #E0FFFF;

}

.rgnotice .content {

width:150px;

height:206px;

background-color:#DBDBDB;

position:absolute;

top:0;

right:56px;

display:none;

}

.rgnotice ul li:hover + .content {

display:block;

-webkit-box-shadow:-5px 5px 8px #EBEBEB;

-moz-box-shadow:-5px 5px 8px #EBEBEB;

-o-box-shadow:-5px 5px 8px #EBEBEB;

-ms-box-shadow:-5px 5px 8px #EBEBEB;

box-shadow:-5px 5px 8px #EBEBEB;

}

.fadeinx {

-webkit-animation:flipInX 1s .2s ease both;

-moz-animation:flipInX 1s .2s ease both

}

@-webkit-keyframes flipInX {

0% {

-webkit-transform:perspective(400px) rotateX(90deg);

opacity:0

}

40% {

-webkit-transform:perspective(400px) rotateX(-10deg)

}

70% {

-webkit-transform:perspective(400px) rotateX(10deg)

}

100% {

-webkit-transform:perspective(400px) rotateX(0deg);

opacity:1

}

}@-moz-keyframes flipInX {

0% {

-moz-transform:perspective(400px) rotateX(90deg);

opacity:0

}

40% {

-moz-transform:perspective(400px) rotateX(-10deg)

}

70% {

-moz-transform:perspective(400px) rotateX(10deg)

}

100% {

-moz-transform:perspective(400px) rotateX(0deg);

opacity:1

}

}