WEB标准网站设计心得
Dodo's Blog @ DoNews.com
导航
DonewsBlog
Donews首页
Donews社区
Donews邮箱
我的首页
联系作者
聚合
登录
Blog统计
文章 - 93
收藏 - 0
评论 - 810
Trackbacks - 32
公告
本blog所有资源和信息都是SHARE的,请随便用
M:dodoing@gmail.com
生日密码
文章
7788
(RSS)
DIY Blog Skin
(RSS)
Javascript
(RSS)
Trekking
(RSS)
Web标准
(RSS)
收藏
相册
2003云南
2004吴根越角-西塘
BlogUI
design
Outdoor Album
白洋淀赏荷
山西五台山
Blogs
Redondo's Blog
Tenoz's Blog
Xiaolin's Blog
高少星's Blog
红眼web观察
图片新闻站
微软IE的开发博客
问号鱼的博客
夏花IT资讯
一叶千鸟
钟钟的博
Links
265帮你链
Flash小游戏
Gmail 风格的iMail模板下载
IQ星座血型占卜
(RSS)
IQ智商测试
QQ,MSN表情大全
Web标准设计推广
xhtmlhelp
超准的在线算命
个人门户1.0
精选图库
农历查询
软件下载
十二星座日期
我的手机博客
我工作的地方
星座生日密码
存档
2007年10月(3)
2007年06月(1)
2007年04月(3)
2007年01月(1)
2006年12月(2)
2006年11月(3)
2006年08月(5)
2006年07月(5)
2006年06月(4)
2006年05月(1)
2006年04月(5)
2006年03月(2)
2006年02月(2)
2006年01月(2)
2005年12月(4)
2005年10月(7)
2005年08月(5)
2005年07月(1)
2005年06月(7)
2005年05月(18)
2005年04月(1)
2004年11月(3)
2004年10月(12)
正在读取评论……
符合WEB标准的下拉导航菜单例子之一
阿捷(www.w3cn.org)发给我的,不错的东西
代码如下:
在线运行演示
<!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" 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>
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=397544
[
点击此处收藏本文
] 发表于2005年05月25日 4:56 PM
正在读取评论……
添加评论
大名
网址
验证码
评论
记住我
Powered by:
Copyright © dodo