效果图：
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<script src="javascript/jquery.min.js" type="text/javascript"></script>
<script src="javascript/topic.js" type="text/javascript"></script>
<script src="javascript/gameshow.js" type="text/javascript"></script>
<script src="javascript/array.js" type="text/javascript"></script>
<script src="javascript/CommonWeb.js" type="text/javascript"></script>
<script src="javascript/dd_belatedpng.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.nav');
$(function () {
$(document).mouseup(function () {
$(".rank-data").hide();
});
$(".rank-select .current").text($("#hfperiodid").val());
$(".rank-select .current").click(function () {
if ($(".rank-data").is(":hidden")) {
$(".rank-data").show();
} else {
$(".rank-data").hide();
}
})
$(".rank-data").click(function () {
$(".rank-select .current").text($(this).text())
$(".rank-data").hide();
var dataRank = $(this).attr("date-rank");
$(".rank-value").val(dataRank);
var periodid = $(".rank-value").val();
// alert(periodid);
window.location.href = "Index.aspx?periodid=" + periodid + "";
})
$("#rankbtn a").each(function (index) {
$(this).click(function () {
//先移除选中的样式
$("#rankbtn a.current").removeClass("current");
//增加当前选中样式
$(this).addClass("current");
//隐藏掉未选中的内容
$("#content div:eq(" + index + ")").show().siblings().hide();
});
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1 class="banner">
我的活跃值</h1>
<div class="wrapper">
<uc1:ucNav ID="ucnav" runat="server" />
<div class="container">
<uc2:ucSidebar ID="sidebar" runat="server" />
<div class="main">
<div class="rank-info">
<h2>
活跃值排行榜</h2>
<p>
The charts</p>
<div class="rank-btn" id="rankbtn">
<a href="javascript:;" class="current">活跃值排行榜</a><a href="javascript:;">兑换排行榜</a><a
href="javascript:;">抽奖排行榜</a>
</div>
<div class="rank-select">
<ul>
<li class="current" date-rank="0">请选择您要查看的期数</li>
<asp:Repeater ID="rpt_period" runat="server">
<ItemTemplate>
<li class="rank-data" date-rank="<%#Eval("id") %>">
<%#Eval("title")%></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<input type="hidden" class="rank-value" id="hfperiodid" runat="server" value="请选择您要查看的期数" />
</div>
<input type="hidden" runat="server" id="sin_periodid" />
<h3 class="rank-current">
当前期数：<asp:Literal ID="periodname" runat="server"></asp:Literal></h3>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Css
.rank-select{position:absolute;top:70px;right:0;}
.rank-select ul{position:relative;200px;cursor:pointer;background:url(../images/rank-select.png) no-repeat right 0;}
.rank-select ul .current{background:none;display:block;}
.rank-select ul li{height:26px;line-height:26px;color:#fff;border:1px solid #61ce19;background:#265700;text-indent:10px;margin-top:-1px;display:none;position:relative;}
.rank-current{position:absolute;line-height:30px;color:#61ce19;font-weight:normal;font-size:14px;left:0;bottom:0;}