下拉框
<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(); })