天极首页
|
产品报价
|
行情
|
手机
|
数码
|
笔记本
|
台式机
|
DIY
|
外设
|
网络
|
服务器
|
GPS
|
数字家庭
|
软件
|
游戏
|
壁纸
|
群乐
|
博客
|
下载
|
VISTA
|
奥运
|
BBS
北京
上海
广州
深圳
南京
太原
沈阳
西安
用户
登录
软件频道>
网页陶吧>
网页制作教程
网站推广
ASP视频教程
网页制作手册
|
软件频道产品中心
软件下载
您现在的位置：
天极网
>
软件频道
>
网页陶吧
> 符合WEB标准的下拉导航菜单例子
全文
评论
符合WEB标准的下拉导航菜单例子
2006-05-16 09:45
作者：龙犊整理
出处：天极网
责任编辑：龙犊
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- 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> </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
运行代码
复制代码
另存代码
——您可以运行代码察看特效，您也可以复制或者另存源代码。本代码由天极网页陶吧提供。
相关搜索：
相关文章及软件
·
相册的自动播放效果SlideShow
·
左中右3栏布局中最先显示中栏内容的方法
·
旁门左道 你没见过的CSS效果
·
避免表格table被撑开变形的CSS
·
用DIV做不规则形状的环绕文字
·
经典 用CSS实现表单form布局
关注此文读者还看过
热门关注
特别推荐
1
迅雷(Thunder)
31925次/周
2
QQ旋风
15768次/周
3
Vho Video Downloader
6次/周
4
脱兔TuoTu
43次/周
5
BitComet
46次/周
6
VeryCD 电驴(EasyMule)
1756次/周
7
快车(FlashGet)
3341次/周
8
月亮视频下载器
21次/周
9
Megavideo Video Downloader
8次/周
10
Rude Video Downloader
0次/周
1
迅雷(Thunder)
31925次/周
2
优酷官方视频下载器：i酷
22909次/周
3
QQ旋风
15768次/周
4
快车(FlashGet)
3341次/周
5
网页迅雷( Web迅雷)
3304次/周
6
VeryCD 电驴(EasyMule)
1756次/周
7
Huntmine 汉魅
552次/周
8
网吧版迅雷
527次/周
9
比特彗星(BitComet)
281次/周
10
屁屁狗PPGou
270次/周
网友关注
软件下载
娱乐下载
驱动下载
1
美图秀秀（美图大师）
86574次/周
2
腾讯QQ 2009 正式版
35506次/周
3
迅雷(Thunder)
31925次/周
4
便携式文件夹加密器
30394次/周
5
优酷官方视频下载器：i酷
22909次/周
6
QQ旋风
15768次/周
7
电脑报2009年第25期hosts安全软件
15030次/周
8
PP加速器(PPLive加速)
14256次/周
9
皮皮影视播放器（皮皮网PPfilm）
12308次/周
10
浩辰ICAD平台软件CAD2008i
8725次/周
1
迈克尔杰克逊世纪最强舞蹈精华集合
510次/周
2
王桂权自拍下体图片登上艺术展
350次/周
3
性感美女彭丹激情视频珍藏版
297次/周
4
搞笑 拍三级片的搞笑事
280次/周
5
喵喵的短信铃声
174次/周
6
3GP手机视频 猫和老鼠东北方言版
157次/周
7
电影《变形金刚2》1080p预告片
156次/周
8
兰花[雅尼]凤凰卫视天气预报主题曲
155次/周
9
3GP手机视频 迈克尔杰克逊全球禁播MTV
146次/周
10
RINSIN工口河原崎家的一族精选2CG
125次/周
1
万能摄像头驱动
10895次/周
2
万能声卡驱动
2669次/周
3
301P通用摄像头驱动
2491次/周
4
最新万能摄像头驱动 For Windows
1757次/周
5
万能网卡驱动 适用于所有网卡
1422次/周
6
HP惠普笔记本Conexant High Definition声卡最新驱动
1364次/周
7
万能显卡驱动 适用于所有显卡
1238次/周
8
NOKIA Monitor Test
1110次/周
9
手机usb万能驱动下载
959次/周
10
HWMonitorPro
958次/周
文章排行
本周
本月
最近更新
1
2
3
4
5
6
7
8
9
10
用“添加或删除程序”无法卸载程序怎么办？
Photoshop教程：给时尚模特加上质感肤色
Photoshop教程：简单三步做出一口好牙齿
傲游2.5.2正式版试用评测 不假死又好用
三十五个极富创意的纸质网站设计欣赏
Photoshop给模特制作卷翘漂亮的睫毛
使用美图秀秀打造完美天使曾轶可
'玩家宝宝'教你制作迈克·杰克逊纪念视频
Ubuntu Desktop 9.04的系统备份操作
揭秘火狐Firefox 3.5的十个有用插件
1
2
3
4
5
6
7
8
9
10
Photoshop教程：独特手法表现人物的艺术美
[组图]开源 Ubuntu 或成微软Windows终结者
Photoshop教程：制作迈克尔·杰克逊纪念海报
全新引擎 本本专用—'金山毒霸极速版'初试
Photoshop教程：超现实主义暗调插画创作
美图秀秀打造冷蓝效果梦幻女孩
魔兽世界开机在即 用玩家宝宝记录这一时刻
主题设计实例专题：夏日冰爽清凉设计秀
美图秀秀一键秀出宝宝粉粉照片
[图]Windows 7 build 7264 ISO镜像文件泄露
1
2
3
4
5
6
7
8
9
10
Photoshop教程：消除脸部雀斑还原皮肤质感
Logo设计欣赏 千变万化的动物原型
Photoshop简单合成制作最佳效果的宝宝照片
Photoshop教程：个性潮流的音乐海报制作
Photoshop基础教程：明明白白“动作”
AutoCAD三维实例教程：异形三通的画法
用Photoshop为美女照片调出淡淡青黄色
Photoshop技巧：为模特照片制作影楼效果
益盟操盘手主力版 打响股民“信心保卫战”
一分钟打造《暹罗之恋》男主角Pchy
1
11个实用的JavaScipt技巧助你轻松布局网页
2
活用SNS全局动态 导引用户参与互动
3
运用Photoshop优化网页图片的技巧汇总
4
设计基础:25个实用的下拉网页菜单脚本推荐
5
网站建设基础：教你如何运营企业网站
6
论坛feed事件在UCHome中未显示的排查方法
7
构建完美作品集网站不可忽略的十个方面
8
CSS基础：彻底了解CSS中的各类长度单位
9
网站建设基础：改版中需要注意的四个细节
10
简约之美 15个激发灵感的网站设计欣赏
热点推荐
陈冠希事件的启示 明星电脑安全防范手册
IBM Lotus Symphony专区
天极网软件频道2007年热点专题回放
博客赚钱大法：Text Link Ads 赚钱模式
关于我们
|
About us
|
网站律师
|
天极服务
|
电子杂志
|
RSS订阅
|
加入我们
|
网站地图
Copyright (C) 1999-2009 Chinabyte.com, All Rights Reserved 版权所有 天极网络
商务联系、网站内容、合作建议：010-82657868
版权声明
在线提交意见反馈
渝ICP证B2-20030003号
天极传媒：
天极网
|
比特网
|
IT专家网
|
IT商网
|
52PK游戏网
|
IT分众
