1 <div class="dropdownContainer"> 2     <div class="dropdownDefault">1</div> 3     <span class="downArrow arrow"></span> 4     <ul class="dropdrown-menu"> 5         <li><a href="#">1</a></li> 6         <li><a href="#">2</a></li> 7         <li><a href="#">6</a></li> 8         <li><a href="#">8</a></li> 9     </ul>10 </div>

1 .dropdownContainer{position: relative;height: 30px;width: 100%;background: #555;}2 .dropdownDefault{border:1px solid #ddd;line-height: 28px;text-indent: 0.5em;}3 .dropdownContainer .downArrow{position: absolute;right: 5px;top: 9px}4 .dropdrown-menu{position: absolute;top:100%;width: 100%;left: 0;background: #555;display: none;}5 .dropdrown-menu li{line-height: 24px;}6 .dropdrown-menu li a{display: inline-block;width: 100%;text-indent: 0.5em}7 .dropdrown-menu li a:hover{background: #0078b6;font-size: 1.1em;}8 .arrow{width: 0;height: 0;display: inline-block;cursor: pointer;}9 .downArrow{border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #fff;}

1 $(".dropdownDefault,.dropdownContainer .downArrow").click(function(){2     $(this).siblings(".dropdrown-menu").show();3 });4  5 $(".dropdrown-menu li a").click(function(){6     $(this).parent().parent().siblings(".dropdownDefault").html($(this).html());7     $(this).parent().parent().hide();8 });