asp导航条子菜单横向
示意图：（代码红色部分为主要。）
<%@ 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>