menu dropdown minimalis

.glossy-selectbox { display:inline-block; font:normal bold 12px Electrolize,Arial,San-Serif; position:relative; width:300px; float:right; margin-top:5px; background-color:#272727; border:3px double #3d3d3d; box-shadow:0 0 3px #000; text-align:left; } .glossy-selectbox:before, .glossy-selectbox:after { content:""; display:block; width:0; height:0; border:3px solid transparent; border-width:5px 3px; border-bottom-color:#999; position:absolute; top:5%; right:5px; z-index:4; } .glossy-selectbox:after { border-color:#999 transparent transparent; top:auto; bottom:5%; } .glossy-selectbox input { display:block; position:absolute; top:0; right:0; bottom:0; width:15px; height:100%; opacity:0; z-index:10; cursor:pointer; } .glossy-selectbox label { display:block; line-height:30px; color:rgba(255,255,255,.5); padding:0 15px; -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .glossy-selectbox label:before { content:attr(data-default); } .glossy-selectbox label:after { content:""; display:block; position:absolute; top:0; right:0; bottom:0; width:15px; border-left:1px solid rgba(0,0,0,.4); -webkit-border-radius:0 7px 7px 0; -moz-border-radius:0 7px 7px 0; border-radius:0 7px 7px 0; -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:hover + label { color:white; } .glossy-selectbox input:hover + label:after { background-color:rgba(255,255,255,.04); } .glossy-selectbox ul { margin:0 0; padding:2px; position:absolute; top:100%; left:14px; right:14px; background-color:#272727; border:1px solid #3c3c3c; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4); visibility:hidden; opacity:0; z-index:99; } .glossy-selectbox li { margin:0 0; padding:0 0; list-style:none; float:left; width:50%; display:inline; } .glossy-selectbox a { display:block; position:relative; color:#999; text-decoration:none; text-shadow:0 0 2px black; line-height:30px; border-bottom:1px solid #171717; border-right:1px solid #171717; padding:0 15px 0 32px; -webkit-box-shadow:inset 0 0 0 1px #333; -moz-box-shadow:inset 0 0 0 1px #333; box-shadow:inset 0 0 0 1px #333; /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */ -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .glossy-selectbox a:nth-child(even) { border-right-width:0; } .glossy-selectbox a:before { content:""; display:block; width:16px; height:16px; position:absolute; top:7px; left:7px; background-color:transparent; background-repeat:no-repeat; background-position:50% 0; } .glossy-selectbox a:hover:before { background-position:50% 100%; } .glossy-selectbox a:hover { background-color:rgba(0,0,0,.2); color:#ccc; } /* On click, then... */ .glossy-selectbox input:checked + label { color:rgba(255,255,255,.4); -webkit-transition-duration:.4s; -moz-transition-duration:.4s; -ms-transition-duration:.4s; -o-transition-duration:.4s; transition-duration:.4s; } .glossy-selectbox input:checked + label:before { content:attr(data-focus); } .glossy-selectbox input:checked + label:after { background-color:rgba(0,0,0,.2); -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:checked ~ ul { visibility:visible; opacity:1; }