在本文中，将探讨如何使用ASP.NET和CSS创建动态级联菜单。级联菜单是一种用户界面元素，允许用户通过点击或悬停在主菜单项上来访问子菜单项。将从基本的HTML结构开始，然后定义CSS样式，并最终实现后端代码。
首先，需要创建包含菜单内容的HTML。MainMenu将显示为浏览器中显示的菜单，而SubMenu将显示为点击或悬停在主菜单项上时下拉的菜单。将SubMenu定义为一个类，这将允许在主菜单中创建多个子菜单。如果只有一个菜单，可以将MainMenu改为类。
<form id="form1" runat="server">
<ul id="MainMenu" class="menu">
<li>首页</li>
<li>其他首页
<ul class="SubMenu">
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
</ul>
</li>
</ul>
</form>
接下来，将定义一些样式，这些样式将放置在样式表中，并包含在HTML中。这些样式将确保菜单在所有浏览器中都能正常工作，除了IE6和可能的IE7。
定义了基本的样式规则，包括移除列表项目的符号、设置初始菜单水平浮动、清除最后一个MainMenu项的浮动效果、隐藏MainMenu下的所有SubMenu、当鼠标悬停在当前菜单项上时显示其子菜单、定义子菜单的列表项以及定义子菜单列表项悬停时的样式。
现在可以继续开发网站的其余部分，而不必担心菜单问题。
如果老板要求添加更多的菜单级别，由于已经定义了“魔术样式”，这将变得相当简单。只需要在列表中添加额外的菜单项即可。不需要更新CSS，就像之前的例子一样。只需要更新JavaScript。
<form id="form1" runat="server">
<ul id="MainMenu" class="menu">
<li>首页</li>
<li>其他首页
<ul class="SubMenu">
<li>首页1</li>
<li>首页2</li>
<li>首页3
<ul class="SubMenu">
<li>子首页1</li>
<li>子首页2</li>
<li>子首页3</li>
</ul>
</li>
</ul>
</li>
</ul>
</form>
在本节中，将使用LINQ来创建一个级联菜单。首先，需要创建包含菜单内容的HTML。将使用一个基本的HTML结构，因为将创建一个特殊的集合来生成菜单的锯齿列表，并在代码后台页面处理。
<form id="form1" runat="server">
<ul id="MainMenu" class="Menu">
<li>首页</li>
<li>其他首页
<asp:Literal ID="SubMenu" runat="server"></asp:Literal>
</li>
</ul>
<asp:GridView ID="GridView1" runat="server" Visible="False"></asp:GridView>
</form>
接下来，需要设置代码后台来处理从数据库生成菜单。假设已经在名为MenuDataClass.dbml的文件中定义了SQL类。
protected void Page_Load(object sender, EventArgs e)
{
Query();
Literal1.Text = "<ul class='SubMenu'>" +
"<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
"</ul>";
}
private void Query()
{
DataClassesDataContext db = new DataClassesDataContext();
var a = from b in db.GetTable<home>() select b;
GridView1.DataSource = a;
GridView1.DataBind();
}
在本节中，将使用SqlDataAdapter来创建一个级联菜单。首先，需要创建一个包含菜单内容的HTML结构。
<form id="form1" runat="server">
<ul id="MainMenu" class="Menu">
<li>首页</li>
<li>其他首页
<asp:Literal ID="SubMenu" runat="server"></asp:Literal>
</li>
</ul>
</form>
接下来，将创建一个数据库表来存储菜单。
CREATE TABLE Home
{
ID int Identity(1,1),
MenuName varchar(30)
}
INSERT INTO Home(MenuName) VALUES("首页1");
INSERT INTO Home(MenuName) VALUES("首页2");
INSERT INTO Home(MenuName) VALUES("首页3");
SqlConnection conn1 = new SqlConnection("data source=MA\\SQLEXPRESS;initial catalog=menu1;integrated security=true;");
protected void Page_Load(object sender, EventArgs e)
{
SqlDataAdapter da1 = new SqlDataAdapter("select * from home", conn1);
DataSet ds1 = new DataSet();
da1.Fill(ds1, "home");
Literal1.Text = "<ul class='SubMenu'>" +
"<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
"<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
"</ul>";
}