示意图：（代码红色部分为主要。）
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>实验室管理</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <style type="text/css"> body {margin:0px;} a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: none;} a:active {text-decoration: none;} /*New Nav Style*/ #nav{ height:49px; position:relative; width:1100px; margin:20px auto;} #nav .l{ height:49px; width:28px; float:left} #nav li { float:left; list-style:none;text-align:center;font-size:14px; } #nav li .v a{ width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; } #nav li .v a:hover,#nav li .v .sele{color:#fff;height:49px;line-height:49px; font-size:14px;} #nav .kind_menu { height:30px;height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;} #nav .kind_menu a {color:#000; float:left; text-align:center; width:80px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px; text-decoration:none;} #nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid; text-decoration:none;} #nav .kind_menu span { font-size:10px; color:#000; line-height:30px; line-height:26px; float:left } Style Attribute { text-align: center; } #div_list { background: #33CCFF; height: 40px; width: 1100px; margin: 0 0 10px 0; } #div_foot { height: 50px; font-size: xx-large; } .clr { clear: both; } .style17 { text-align: center; width: 485px; } .style18 { color: #00FF00; } .style19 { font-size: x-large; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("ul#nav li").hover(function () { //Hover over event on list item $(this).find("span").show().css({ 'background': '#33CCFF', 'display': 'block' }); //Show the subnav }, function () { //on hover out... $(this).find("span").hide(); //Hide the subnav }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div style="width: 1100px; margin: 1px auto; list-style-type: square;"> <div id="div_head1" style="background-image: url('img/head.png'); background-repeat: no-repeat; background-attachment: scroll;"> <asp:Image ID="Image1" runat="server" Height="84px" ImageUrl="~/img/logo.gif" Width="99px" /> <span class="style19"><strong>机电一体化实验室信息管理系统</strong></span> <br /> <br /> </div> <div id="div_time" style="height: 30px; width: 1100"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick1"> </asp:Timer> <asp:TextBox ID="tb_timer" runat="server" ReadOnly="True" BorderStyle="None" Width="186px"></asp:TextBox> <span class="style3"> <span class="style18"> 为研发服务 为生产服务 为社会服务</span></span> <asp:Label ID="Label1" runat="server" Style="text-align: left" Text="欢迎您："></asp:Label> <asp:Label ID="Label2" runat="server" Text=" xxx"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </div> <div id="div_main"> <div id="div_list"> <div id="nav"> <div class="l"> </div> <ul class="c"> <li class="nav_lishw" id=""><span class="v"><a href="2.aspx" target="_blank" class="sele">首页</a></span> <div class="kind_menu" style="font: small serif; left: 30px; display: block; color: #FF0000;"> 欢迎您访问本系统! </div> </li> <li class="" id=""><span class="v"><a href="#" class="">实验室导航</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="2_1.aspx">实验室文化</a> <span>|</span> <a href="#">管理制度</a> <span>|</span> <a href="2_3.aspx"> 试验流程</a><span>|</span> <a href="#">实验内容</a><span>|</span> <a href="#">实验平台</a> </div> </li> <li class="" id=""><span class="v"><a href="#" class="">实验管理</a></span> <div class="kind_menu" style="display: none;"> <a href="#">实验申请</a> <span>|</span> <a href="#">试验计划</a> <span>|</span> <a href="3_3.aspx"> 当前实验</a> <span>|</span> <a href="#">实验报告</a> <span>|</span> <a href="#">实验查询</a> </div> </li> <li class="" id=""><span class="v"><a href="#" class="">项目管理</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="#">项目申请</a> <span>|</span> <a href="#">项目计划</a> <span>|</span> <a href="#"> 在研项目</a> <span>|</span> <a href="#">项目介绍</a> <span>|</span> <a href="#">项目总结</a> <span>|</span> <a href="#">项目查询</a> </div> </li> <li class="" id=""><span class="v"><a href="#" class="">物资管理</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="#">基本实验条件</a> <span>|</span> <a href="#">物资库</a> <span>|</span> <a href="#"> 材料库</a> <span>|</span> <a href="#">元件库</a> <span>|</span> <a href="#">工具库</a> <span>|</span> <a href="#">设备库</a> <span>|</span> <a href="#">挂件库</a> <span>|</span> <a href="#">资料库</a> <span>|</span> <a href="#">新品库</a> <span>|</span> <a href="#">配套实验条件</a> </div> </li> <li class="" id=""><span class="v"><a href="#" class="">资料管理</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="#">资料查询</a> <span>|</span> <a href="#">资料添加</a> <span>|</span> <a href="#"> 资料修改</a> <span>|</span> <a href="#">资料下载</a> </div> </li> <li class="" id="Li1"><span class="v"><a href="#" class="">通知通告</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="7_1.aspx">通知查询</a> <span>|</span> <a href="#">通知通告</a> <span>|</span> <a href="#"> 通知发布</a> </div> </li> <li class="" id="Li2"><span class="v"><a href="#" class="">学生风采</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="#">实验室活动</a> <span>|</span> <a href="#">实验室项目</a> <span>|</span> <a href="#"> 实验室成果</a> <span>|</span> <a href="#">优秀团队</a> <span>|</span> <a href="#">优秀个人</a> </div> </li> <li class="" id="Li3"><span class="v"><a href="#" class="">工厂信息化</a></span> <div class="kind_menu" style="left: 10px; display: none;"> <a href="#">信息化概念</a> <span>|</span> <a href="#">信息化实例</a> <span>|</span> <a href="#"> 信息化模拟</a> <span>|</span> <a href="#">信息化实践</a> </div> </li> </ul> </div> </div> <br /> <br /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <script type="text/javascript"> var site_url = window.location.href.toLowerCase(); switch (true) { default: $("#nav li").attr("class", ""); $("#nav li").eq(0).attr("class", "nav_lishw"); $(".nav_lishw .v a").attr("class", "sele"); $(".nav_lishw .kind_menu").show(); } $("#nav li").hover( function () { clearTimeout(setTimeout("0") - 1); $("#nav .kind_menu").hide(); $("#nav li .v .sele").attr("class", "shutAhover"); $(this).attr("id", "nav_hover") $("#nav_hover .v a").attr("class", "sele"); $("#nav_hover .kind_menu").show(); }, function () { if ($(this).attr("class") != "nav_lishw") { $("#nav_hover .v .sele").attr("class", ""); $("#nav_hover .kind_menu").hide(); } $(this).attr("id", "") $("#nav li .v .shutAhover").attr("class", "sele"); setTimeout(function () { $(".nav_lishw .kind_menu").show(); $(".nav_lishw .v a").attr("class", "sele"); }, 50); } ); </script> <div class="clr"> </div> <div id="div_foot"> <p class="style17" style="background-color: #33CCFF; width: 1100px"> <span style="color: rgb(0, 0, 0); font-family: 宋体; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">版权所有</span><font style="color: rgb(0, 0, 0); font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: Arial, Helvetica, sans-serif;">©</font><span style="color: rgb(0, 0, 0); font-family: 宋体; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"><span class="Apple-converted-space"> </span>2008-2013<span class="Apple-converted-space"> xxx </span>- 专业网站建设服务平台<span class="Apple-converted-space"> </span></span></p> </div> </div> </div> </form> </body> </html>