产品推广 公司博客 创业心态 常见问题 百度快照排名 网站建设 网站运营 网络营销 营销型网站

下拉导航菜单例子

网站建设

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
</head>

<body>
<style>
*{margin:0;padding:0;border:0;}

#div_center { width:872px; margin-left: auto;margin-right:auto;background:url(nav.jpg) repeat-x; height:30px;font-size:14px;} /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px; width:93%; margin:auto;} /*控制一级菜单行高；上边距5px；*/
#nav a { display: block; width: 77px; text-align:center; color:#FFF;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/
#nav a:link { color:#FFF; text-decoration:none;margin:0;} /* 未访问的链接 */
#nav a:visited {color:#FFF;text-decoration:none;margin:0;} /* 已访问的颜色 */
#nav a:hover {color:#000; background-color:#D9D9D9;} /* 鼠标在链接上 */

#nav li {float: left;font-weight:bold;height:30px; line-height:30px; margin:0px 10px 10px 0px;color:#FFF;} /* 一级菜左对齐 */
#nav li a:hover{background:#FFFFFF;} /* 鼠标在一级菜单上改变其背景色 */
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color:#217DBE; padding:1px;} /*二级菜单总体样式：行高24px；背景颜色；外框宽度；相对位置；边框一个象素，上边没样式，左右下边实线，边框颜色#003399；内边距1个象素*/

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} /* 二级菜单链接样式；背景宽度、左对齐，左缩进2 */
#nav li ul a:link {color:#0d5097; text-decoration:none;} /* 未访问的链接 */
#nav li ul a:visited {color:#0d5097;text-decoration:none;} /* 已访问的链接 */
#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#0B77DE;}/* 鼠标在链接上 */

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<script type=text/javascript>
<!–
function menuFix() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“li”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? ” “: “”) + “sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(“( ?|^)sfhover\b”),
“”);
}
}
}
window.onload=menuFix;
//–></script>

<div id=div_center>
<UL id=nav>
<LI style=”MARGIN-LEFT: 10px”><A “{$InstallDir}index.asp”>网站首页</A></LI>
<LI><A “{$InstallDir}news/Index.asp”>警务动态</A>
<UL>
<LI><A “{$InstallDir}news/ShowClass.asp?ClassID=1”>·全国警务动态</A></LI>
<LI><A “{$InstallDir}news/ShowClass.asp?ClassID=2”>·广东省警务动态</A></LI>
<LI><A “{$InstallDir}news/ShowClass.asp?ClassID=2”>·惠州市警务动态</A></LI>
<LI><A “{$InstallDir}news/ShowClass.asp?ClassID=3”>·媒体素材区</A></LI></UL></LI>
<LI><A “#”>公安公告</A>
<UL>
<LI><A “{$InstallDir}qyjj/ShowArticle.asp?ArticleID=4”>·公告公示 </A></LI>
<LI><A “{$InstallDir}qyjj/ShowArticle.asp?ArticleID=5”>·人员招聘区</A></LI>
</UL></LI>
<LI><A “{$InstallDir}Article/”>政务公开</A>
<UL>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=7”>·领导简介</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=8”>·机构概况</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=9”>·领导讲话</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=10”>·工作规则</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=11”>·工作目标及执行</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=9”>·统计数据</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=10”>·应急管理 </A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=11”>·人事信息</A></LI>
<LI><A “{$InstallDir}Article/ShowClass.asp?ClassID=11”>·资金信息</A></LI>

</UL></LI>
<LI><A “{$InstallDir}wnews/”>公安文化</A>
<UL>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=12”>·警察摄影家协会</A></LI>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=13”>·警察书画廊</A></LI>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=14”>·阳光文苑</A></LI>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=15”>·警察故事</A></LI>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=16”>·惠州警察博物馆</A></LI>
<LI><A “{$InstallDir}wnews/ShowClass.asp?ClassID=16”>·法制时评</A></LI>
</UL></LI>

<LI><A “{$InstallDir}Photo/”>便民服务</A>

<UL>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=20”>·办事指南</A></LI>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=21”>·网上查询</A></LI>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=22”>·网上举报 </A></LI>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=21”>·表格下载</A></LI>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=22”>·电话查询 </A></LI>
<LI><A “{$InstallDir}Photo/ShowClass.asp?ClassID=21”>·热点答疑</A></LI>

</UL></LI>

<LI><A “{$InstallDir}Soft/Index.asp”>惠州警视</A>
</LI>

<LI><A “{$InstallDir}GuestBook/”>视频直播室</A></LI>
<LI><A “{$InstallDir}bbs/”>网上信访</A> </LI></UL>
</div>

</body>
</html>（nav.jpg）导航效果.bmp：

继续阅读