精彩专题推荐:
建站之入门课
建站之必修课
建站之关键课
网站价值所在
流量提高专题
css+div 标准
个人网站打造全过程
网站搜索
收藏本站
联系我们
导航
:
建站首页
|
网站设计
|
网站开发
|
网站运营
|
网页软件
|
建站指南
|
搜索优化
|
图像处理
|
视频教程
|
书籍教程
|
建站专题
让你的网站产生收益赚钱,有博客和网站的绝对不能错过
将指定的流量带到你的网站,为你站增加有效的访客,为你提升业绩
当前位置:
首页
>
网站设计
>
网页特效
>正文
符合WEB标准的下拉导航菜单例子
来源: 时间:06-09-11 点击:
点击这里收藏本文
<html
xml
ns="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].onmou
seo
ver=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].onmou
seo
ut=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>
9
7
3
1
2
4
8
:
把此文章收藏到:
相关教程
·
可以收缩和和伸展的表格(符合
·
符合标准的对联广告网页特效代
·
类似于Flash的超酷网页特效代码
·
怎么让别人看不到我的网页代码
·
JS实现浏览器菜单命令
·
又一个做网站比较流行的图片幻
·
网页特效 图片加载进度实时显示
·
网页特效之用css样式表实现首字
·
在DIV+CSS排版中新闻列表的制作
·
CSS+DIV:让文本字符环绕在你的
·
用DIV做不规则形状的环绕文字
·
避免表格table被撑开变形的CSS
·
相册的自动播放效果SlideShow
·
CSS应用实例:水平线变成虚线
·
如何利用PHP和CSS改变网页文字
广而告之
文章搜索
Google
JZxue.Com
最新文章
网站推广—网站建设的关键课
吸引访客,做内容有价值的网
关于Photoshop直方图的详细
网站策划,B2B网站策划者应
Web标准网站开发人员配备
便宜/廉价的网站推广方式
写给做BBS的新站长
行为经济学在网站运营中的
漫谈网站改版的必要性
网站策划需要具备的知识
外贸网站建设全攻略
CSS让网页更容易设计与维护
和马云学习如何做网站推广
推荐导读
优秀个人网站打造全过程
如何策划网站?
wap建站入门教程
以这种方式做网站肯定会失败
Photoshop用另类方法打造水彩效果
FireWorks教程:DIY树叶笔触画一棵树
用Photoshop制作非主流风格MM秀亮的脸蛋
网站制作过程中把握的几点
Photoshop处理唯美照片效果和边框的制作
使用Fireworks 8制作网页效果图
如何在国外进行域名的注册?
简单的CSS改进网站设计的三个技巧
CSS制作的标准的 非侵入的页签切换效果
热门排行
如何制作网页(网页制作实
如何选择网页制作工具
下载安装Dreamweaver8
制作主页前的准备
垃圾站全教程--之一(新手上
怎样个人网页制作,制作个人
制作模板
在Dreamweaver设置站点
制作首页
网站设计65条原则
规划站点
中国所有银行的BIC code(即
个人主页制作完全手册
关于我们
|
联系我们
|
友情链接
|
网站地图
Copyright © 2005 - 2006
建站学
All rights reserved.