CSS 下拉列表菜单。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style> body { width: 95%; margin: 0px auto; } #header { height: 50px; width: 95%; } #nav { position: absolute; /*菜单绝对定位*/ } #nav > li { list-style-type: none; /*去掉第一层li里面的符号*/ float: left; /*将第一层的li横向摆放*/ width: 100px; /*设置宽度*/ font-size: 30px; /*字体大小*/ background-color: #16b6fc; /*背景颜色*/ color: white; /*字体颜色*/ } #nav > li > ul > li { list-style-type: none; /*去掉第二层li里面的符号*/ font-size: 15px; /*字体大小*/ padding-top: 8px; /*设置上间距*/ padding-bottom: 8px; /*设置下间距*/ } #nav li ul { margin-left: 0px; /*将第二层的ul都移到最左边*/ padding-left: 0px; /*将第二层的ul都移到最左边*/ display: none; /*隐藏ul内容，隐藏子菜单内容*/ } #nav > li:hover ul { /*鼠标放在主菜单上，子菜单会显示出来*/ display: block; } #nav > li > ul > li:hover { /*鼠标放在子菜单上，了菜单的背景和字体颜色会改变*/ background-color: white; color: black; } #content { clear: both; padding-left: 40px; } </style></head><body> <form id="form1" runat="server"> <div> <div id="header"> <ul id="nav"> <li>menu1 <ul> <li>menu11</li> <li>menu12</li> <li>menu13</li> </ul> </li> <li>menu2 <ul> <li>menu21</li> <li>menu22</li> <li>menu23</li> </ul> </li> <li>menu3 <ul> <li>menu31</li> <li>menu32</li> <li>menu33</li> </ul> </li> </ul> </div> <div id="content"> <h1>My Page 1</h1> <p>I love this game!!!</p> </div> </div> </form></body></html>