符合WEB标准的下拉导航菜单(CSS菜单)演示

简介:
  1 <! DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2 < html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="zh-CN" >
  3 < head >
  4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
  5 < title > 符合WEB标准的下拉导航菜单(CSS菜单)演示 </ title >
  6
  7 < style  type ="text/css" >
  8
  9*{margin:0;padding:0;border:0;}
 10body {
 11font-family: arial, 宋体, serif;
 12font-size:12px;
 13}

 14
 15#nav {
 16line-height: 24px; list-style-type: none; background:#666;
 17}

 18#nav a {
 19display: block; width: 80px; text-align:center;
 20}

 21#nav a:link {
 22color:#666; text-decoration:none;
 23}

 24#nav a:visited {
 25color:#666;text-decoration:none;
 26}

 27#nav a:hover {
 28color:#FFF;text-decoration:none;font-weight:bold;
 29}

 30#nav li {
 31float: left; width: 80px; background:#CCC;
 32}

 33#nav li a:hover{
 34background:#999;
 35}

 36#nav li ul {
 37line-height: 27px; list-style-type: none;text-align:left;
 38left: -999em; width: 180px; position: absolute;
 39}

 40#nav li ul li{
 41float: left; width: 180px;
 42background: #F6F6F6;
 43}

 44
 45#nav li ul a{
 46display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
 47}

 48#nav li ul a:link {
 49color:#666; text-decoration:none;
 50}

 51#nav li ul a:visited {
 52color:#666;text-decoration:none;
 53}

 54#nav li ul a:hover {
 55color:#F3F3F3;text-decoration:none;font-weight:normal;
 56background:#C00;
 57}

 58#nav li:hover ul {
 59left: auto;
 60}

 61#nav li.sfhover ul {
 62left: auto;
 63}

 64#content {
 65clear: left;
 66}

 67
 68-->
 69
</ style >
 70
 71 < script  type =text/javascript > <!--//--><![CDATA[//>
 72
 73function menuFix() {
 74var sfEls = document.getElementById("nav").getElementsByTagName("li");
 75for (var i=0; i<sfEls.length; i++{
 76sfEls[i].onmouseover=function(){
 77this.className+=(this.className.length>0? " """+ "sfhover";
 78}

 79sfEls[i].onMouseDown=function() {
 80this.className+=(this.className.length>0? " """+ "sfhover";
 81}

 82sfEls[i].onMouseUp=function() {
 83this.className+=(this.className.length>0? " """+ "sfhover";
 84}

 85sfEls[i].onmouseout=function() {
 86this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
 87}

 88}

 89}

 90window.onload=menuFix;
 91
 92//--><!]]></script>
 93</head>
 94<body>
 95<br />
 96<br />
 97<br />
 98<br />
 99<br />
100<br />
101<br />
102<ul id="nav">
103
104<li><a href="#" class="sfhover">产品介绍</a>
105<ul>
106<li><a href="#">产品一</a></li>
107<li><a href="#">产品一</a></li>
108<li><a href="#">产品一</a></li>
109<li><a href="#">产品一</a></li>
110<li><a href="#">产品一</a></li>
111<li><a href="#">产品一</a></li>
112</ul>
113</li>
114
115<li><a href="#">服务介绍</a>
116<ul>
117<li><a href="#">服务二</a></li>
118<li><a href="#">服务二</a></li>
119<li><a href="#">服务二</a></li>
120<li><a href="#">服务二服务二</a></li>
121<li><a href="#">服务二服务二服务二</a></li>
122<li><a href="#">服务二</a></li>
123</ul>
124</li>
125
126<li><a href="#">成功案例</a>
127<ul>
128<li><a href="#">案例三</a></li>
129<li><a href="#">案例</a></li>
130<li><a href="#">案例三案例三</a></li>
131<li><a href="#">案例三案例三案例三</a></li>
132</ul>
133</li>
134
135<li><a href="#">关于我们</a>
136<ul>
137<li><a href="#">我们四</a></li>
138<li><a href="#">我们四</a></li>
139<li><a href="#">我们四</a></li>
140<li><a href="#">我们四111</a></li>
141</ul>
142</li>
143
144<li><a href="#">在线演示</a>
145<ul>
146<li><a href="#">演示</a></li>
147<li><a href="#">演示</a></li>
148<li><a href="#">演示</a></li>
149<li><a href="#">演示演示演示</a></li>
150<li><a href="#">演示演示演示</a></li>
151<li><a href="#">演示演示</a></li>
152<li><a href="#">演示演示演示</a></li>
153<li><a href="#">演示演示演示演示演示</a></li>
154</ul>
155</li>
156
157<li><a href="#">联系我们</a>
158<ul>
159<li><a href="#">联系联系联系联系联系</a></li>
160<li><a href="#">联系联系联系</a></li>
161<li><a href="#">联系</a></li>
162<li><a href="#">联系联系</a></li>
163<li><a href="#">联系联系</a></li>
164<li><a href="#">联系联系联系</a></li>
165<li><a href="#">联系联系联系</a></li>
166</ul>
167</li>
168</ul>
169</body>
170</html>

171
















本文转自BearRui(AK-47)博客园博客,原文链接:http://www.cnblogs.com/BearsTaR/articles/386244.html    ,如需转载请自行联系原作者



相关文章
|
4月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
111 2
|
4月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
55 1
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
259 91
|
2月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
27 4
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
57 2
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
68 28
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
3月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
49 15
|
3月前
|
前端开发
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
下一篇
无影云桌面