select dropdown

gistfile1.html

<style>

quick-filter-wrapper {
    height: 25px;
    background: #e2e2e2; /* Fallback */
    background: url('../images/dropdown-arrow.png') no-repeat right center; /* Fallback */
    background: url('../images/dropdown-arrow.png') no-repeat right center, linear-gradient(top, #f8f8f8, #e2e2e2);
        background: url('../images/dropdown-arrow.png') no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e2e2e2));
        background: url('../images/dropdown-arrow.png') no-repeat right center, -webkit-linear-gradient(top, #f8f8f8, #e2e2e2);
        background: url('../images/dropdown-arrow.png') no-repeat right center, -moz-linear-gradient(top, #f8f8f8, #e2e2e2);
        background: url('../images/dropdown-arrow.png') no-repeat right center, -o-linear-gradient(top, #f8f8f8, #e2e2e2);
        background: url('../images/dropdown-arrow.png') no-repeat right center, -ms-linear-gradient(top, #f8f8f8, #e2e2e2);
    border: 1px solid #D8D8D8;
    border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -o-border-radius: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1), 0 -1px 0 0 rgba(0,0,0,.07) inset;
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.1), 0 -1px 0 0 rgba(0,0,0,.07) inset;
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.1), 0 -1px 0 0 rgba(0,0,0,.07) inset;
        -o-box-shadow: 1px 1px 2px rgba(0,0,0,.1), 0 -1px 0 0 rgba(0,0,0,.07) inset;
    box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
    color: #666;
    display: inline-block;
    font-size: 14px;
    line-height: 1.5em;
    margin: 0;
    padding: 0;    
    z-index: 15;
}
    
.quick-filter-wrapper ul {
    background: #fff;
    border: 1px solid #D8D8D8;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.1);
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.1);
        -o-box-shadow: 1px 1px 2px rgba(0,0,0,.1);
    box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
    position:absolute; 
    left:-9999px; 
    min-width:122px;
    top:-1px; 
    padding: 0; 
    z-index: 20;
}

.quick-filter-wrapper li {
    float:left;
    position:relative; 
    list-style: none;   
}

.quick-filter-wrapper li a { 
    min-width: 105px; 
    display:block; 
    float:left; 
    color:#666; 
    padding: 2px 10px 2px 10px;     
    text-decoration:none; 
}

.quick-filter-wrapper ul li { margin:0; }
.quick-filter-wrapper ul li a { min-width:105px; }

.quick-filter-wrapper ul li:hover:first-child { background-color:#fff; }
.quick-filter-wrapper ul li:hover { background-color:#ccc; }

.quick-filter-wrapper li a:active + ul.dropdown, 
.quick-filter-wrapper li a:focus + ul.dropdown { left: -1px; }

.quick-filter-wrapper li ul:hover { left: -1px; }

</style>

<ul class="quick-filter-wrapper">
    <li><a href="#" tabindex="0"><?php echo __('Quick Filter'); ?></a>
    <ul class="dropdown">
        <li><a href="#"><?php echo __('Quick Filter') ?></a></li>
        <li><a href="<?php echo uri('items/browse'); ?>"><?php echo __('View All') ?></a></li>
        <li><a href="<?php echo uri('items/browse', array('public' => 1)); ?>"><?php echo __('Public'); ?></a></li>
        <li><a href="<?php echo uri('items/browse', array('public' => 0)); ?>"><?php echo __('Private'); ?></a></li>
        <li><a href="<?php echo uri('items/browse', array('featured' => 1)); ?>"><?php echo __('Featured'); ?></a></li>
    </ul>
    </li>
</ul>