HTML
<div class="switcher-container">
<div class="filter-widget">
<span class="filter-active">select one option...</span>
<div class="switcher">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Drupal</a></li>
</ul>
</div>
</div>
</div>
CSS
.switcher{display:none;}
.switcher-container{
width:250px;
margin:0 auto;
}
.filter-widget{
position:relative;
}
.filter-active{
display:block;
width:230px;
height:35px;
background:#9FE9BD;
border-radius:5px;
cursor:pointer;
padding:15px 0 0 20px;
font:1.3em 'Bariol Regular', Arial, sans-serif;
position:relative;
}
.filter-active:after{
content:"ยป";
font:1.8em/1 'Bariol Light', Arial, sans-serif;
position:absolute;
right:20px;
top:9px;
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.switcher{
background:#9FE9BD;
width:250px;
position:absolute;
left:0;
top:47px;
border-radius:0 0 5px 5px;
}
.switcher ul{
padding:0 20px;
}
.switcher li{
list-style:none;
padding:6px 0;
border-bottom:1px solid #fff;
}
.switcher li:last-child{
border:none;
}
.switcher a{
font:1.1em 'Bariol Regular', Arial, sans-serif;
text-decoration:none;
}
.switcher a.selected{
color:#000;
}
jQuery
jQuery('.switcher-container').switcher();