CSS
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: icon;
src: url("css/fonts/icon.eot"), url("css/fonts/icon.svg"), url("css/fonts/icon.ttf"), url("css/fonts/icon.woff");
}
body { background: url("img/bg.jpg"); }
.fleft {
width: 200px;
margin: 10px auto;
position: relative;
}
.cd-dropdown {
width: 300px;
height: 30px;
background: #fff;
box-shadow: 1px 1px 1px 2px #ccc;
margin: 10px;
padding: 10px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: hsla(223,50%,45%,0.7);
cursor: pointer;
}
.cd-dropdown:after {
content: "";
top: 20px;
right: -100px;
position: absolute;
border-top: 5px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.cd-dropdown ul {
position: absolute;
left: 0;
margin-top: 10px;
}
.cd-dropdown li {
width: 300px;
height: 30px;
background: #fff;
position: absolute;
top: -30px;
opacity: 0;
box-shadow: 1px 1px 1px 2px #ccc;
margin: 10px;
padding: 10px;
line-height: 30px;
text-align: center;
list-style: none;
cursor: pointer;
transform-origin: 10% 50%;
-ms-transform-origin: 10% 50%;
-webkit-transform-origin: 10% 50%;
-o-transform-origin: 10% 50%;
-moz-transform-origin: 10% 50%;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.cd-dropdown li:hover { background: hsla(153,50%,45%,0.7); }
.icon-google-plus:before {
font-family: icon;
content: "\21";
font-size: 40px;
}
.icon-facebook:before {
font-family: icon;
content: "\22";
font-size: 40px;
}
.icon-twitter:before {
font-family: icon;
content: "\23";
font-size: 40px;
}
.icon-github:before {
font-family: icon;
content: "\24";
font-size: 40px;
}