.NET 导入新菜单

Repeater+<ul>和<li>
如：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Top.ascx.cs" Inherits="Top" %>

<style type="text/css">
/*全局样式7a686964616fe78988e69d8331333262356662*/
*{
font-size:12px;
}
body{
margin:0;
padding:0;

font-size:12px;
color:#666666;
font-family: "宋体",Arial, Helvetica, sans-serif;
}

/*主导航菜单*/
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:150%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
#menu_out{
960px;
padding-left:2px;
margin-left:auto;
margin-right:auto;
background:url(Images/inagesbar/menu_left.gif) no-repeat left top;
}
#menu_in{
background:url(Images/inagesbar/menu_right.gif) no-repeat right top;
padding-right:4px;
}
#menu{
background:url(Images/inagesbar/menu_bg.gif) repeat-x;
height:63px;
}
.menu_line{
background:url(Images/inagesbar/menu_line.gif) no-repeat center top;
6px;
}
.menu_line2{
background:url(Images/inagesbar/menu_line2.gif) no-repeat center top;
2px;
}
#nav{
padding-left:10px;
}
#nav li{
float:left;
height:35px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:33px;
background:url(Images/inagesbar/menu_on_left.gif) no-repeat left top;
cursor:pointer;
text-decoration:none;
}
#nav li a span{
float:left;
padding:10px 5px 10px5px;
line-height:14px;
background:url(Images/inagesbar/menu_on_right.gif) no-repeat right top;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
#nav li .nav_on{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:right 100%;
color:#333333;
text-decoration:none;
padding:12px 5px 7px 5px;
}
/*子栏目*/
#menu_con{
padding-left:20px;
clear:both;
text-align:center;
}
#menu_con li{
float:left;
height:22px;
margin-top:3px;
text-align:center;
}
#menu_con li a{
display:block;
float:left;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left top;
cursor:pointer;
padding-left:1px;
}
#menu_con li a span{
float:left;
padding:6px 3px 4px 3px;
line-height:12px;
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
text-decoration:none;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right bottom;
}

</style>
<div style="height: 10px;">
</div>

<script language="javascript">
function qiehuan(num){
for(var id = 1;id<=10;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";

}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";

}
}
}
</script>
<div style="960px; height:204px; background:url(<%=this.ImgUrl%>) no-repeat;"></div>
<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a class="nav_on" id="mynav1" onmouseover="javascript:qiehuan(1)" href="Default.aspx"><span>
首页</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav2" onmouseover="javascript:qiehuan(2)" href="Article.aspx?CatID=1"><span>
学院概况</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav3" onmouseover="javascript:qiehuan(3)" href="Article.aspx?CatID=2"><span>
所及中心介绍</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav4" onmouseover="javascript:qiehuan(4)" href="Article.aspx?CatID=3"><span>
教学工作</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav5" onmouseover="javascript:qiehuan(5)" href="Article.aspx?CatID=4"><span>
科研成果</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav6" onmouseover="javascript:qiehuan(6)" href="Article.aspx?CatID=5"><span>
研究生教育</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav7" onmouseover="javascript:qiehuan(7)" href="Article.aspx?CatID=6"><span>
团队建设</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav8" onmouseover="javascript:qiehuan(8)" href="Article.aspx?CatID=7"><span>
精品课程</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav9" onmouseover="javascript:qiehuan(9)" href="Article.aspx?CatID=8"><span>
人才培养</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav10" onmouseover="javascript:qiehuan(10)" href="Article.aspx?CatID=9"><span>
党建工作</span></a></li>
<li class="menu_line"></li>
<%-- <li><a class="" id="mynav11" onmouseover="javascript:qiehuan(11)" href="Article.aspx?CatID=10"><span>
学生工作</span></a></li>
<li class="menu_line"></li>--%>
</ul>
<div id="menu_con">
<div id="qh_con1" style="display: block">
<ul>

</ul>
</div>
<div id="qh_con2" style="display: none">
<ul>
<asp:Repeater ID="repXuYuan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=1&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con3" style="display: none">
<ul>
<asp:Repeater ID="repSuiZhongXing" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=2&cateID=<%#Eval("cate_ID") %>"><span>
<asp:Literal ID="Literal1" Text='<%#Eval("cate_Name")%>' runat="server"></asp:Literal></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con4" style=" display:none; margin-left:100px;">
<ul style="text-align:center;">
<asp:Repeater ID="repJiaoXue" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=3&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con5" style="display: none; margin-left:250px;">
<ul>
<asp:Repeater ID="repKeyan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=4&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con6" style="display: none; margin-left:300px;">
<ul>
<asp:Repeater ID="repTeam" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=5&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con7" style="display: none; margin-left:200px;">
<ul>
<asp:Repeater ID="repJPKC" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=6&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con8" style="display: none; margin-left:520px;">
<ul>
<asp:Repeater ID="repRCPY" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=7&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con9" style="display: none">
<ul>
<asp:Repeater ID="repDangJian" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=8&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con10" style="display: none">
<ul>
<asp:Repeater ID="repStudent" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=9&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con11" style="display: none">
<ul>
<asp:Repeater ID="Repeater10" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=10&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
</div>
</div>