下拉框

  <span class="gameSelect">
      <em>全部比赛</em>
         <ul class="gameCategory">
             <li>全部比赛</li>
             <li>12强赛</li>
             <li>40强赛</li>
         </ul>
  </span>
                

css

.gameSelect{
    float:right;
    width:110px;
    line-height:22px;
    background:url(../img/select1.png) right center no-repeat;
    border-radius:5px;
    position:relative;
    border:#FFF solid 1px;
    margin-top:20px;
    padding-left:10px;
    font-size:0.9em
    }
.gameCategory{
    position:absolute;
    left:0px;
    width:99%;
    border:#FFF solid 1px;
    font-size:0.9em;
    display:none;
    background:#001e41
    }
.gameCategory li{
    height:20px;
    width:100%;
    float:none;
    padding-left:10px;
    }

js

$(".gameSelect").click(function(){
    $(".gameCategory").show();
    })
$(".gameCategory li").click(function(event){
    event.stopPropagation();
    var value = $(this).text();
    $(".gameSelect em").text(value);
    $(".gameCategory").hide();
    })