* { margin:0; padding:0; } ul { list-style:none; } .fixed-menu { position:fixed; right:0px; top:50%; margin-top:-90px; width:60px; box-shadow:0px 0px 20px rgba(0,0,0,.3); z-index:999; } .fx-ul li { position:relative; height:60px; line-height:60px; border-bottom:1px solid #fff; } .fx-ul li a { position:absolute; left:0; top:0; z-index:2; color:#fff; display:block; width:60px; height:60px; line-height:60px; text-align:center; -webkit-transition:all 0.6s; -ms-transition:all 0.6s; -moz-transition:all 0.6s; text-decoration:none; font-size:24px; } .title { position:absolute; left:0px; bottom:1px; color:#fff; width:80px; height:40px; line-height:40px; text-align:center; -webkit-transition:all 0.6s; -ms-transition:all 0.6s; -moz-transition:all 0.6s; background-color:#fff; box-shadow:0px 0px 10px rgba(0,0,0,.3); z-index:1; opacity:0; } .title:before { content:''; display:block; width:10px; height:10px; position:absolute; right:-5px; top:14px; background-color:#fff; transform:rotate(45deg); } .fx-ul li:hover .title { left:-88px; opacity:1; } .fx-ul li.fx-shop a { background-image:-webkit-linear-gradient(left,#f60,#ffb443); background-image:-moz-linear-gradient(left,#f60,#ffb443); background-image:-ms-linear-gradient(left,#f60,#ffb443); } .fx-ul li.fx-shop .title { background-color:#f60; } .fx-ul li.fx-shop .title:before { background-color:#f60; } .fx-ul li.fx-contact a { background-image:-webkit-linear-gradient(left,#00b7ee,#55d8ff); background-image:-moz-linear-gradient(left,#00b7ee,#55d8ff); background-image:-ms-linear-gradient(left,#00b7ee,#55d8ff); } .fx-ul li.fx-contact .title { background-color:#00b7ee; } .fx-ul li.fx-contact .title:before { background-color:#00b7ee; } .fx-ul li.fx-top a { background-image:-webkit-linear-gradient(left,#333,#666); background-image:-moz-linear-gradient(left,#333,#666); background-image:-ms-linear-gradient(left,#333,#666); } .fx-ul li.fx-top .title { background-color:#333; } .fx-ul li.fx-top .title:before { background-color:#333; }