当前位置：网站制作教程网 >> 网页制作教程 >> WEB标准 >> 网页设计:符合标准的二级导航效果

网页设计:符合标准的二级导航效果

编辑:佚名来源:网络评论:0阅读:1555 [6/29/2008 9:53:05 AM]

网页/Html/daima/" target="_blank">特效代码，/Html/buju/" target="_blank">网页制作中不错的导航，而且有二级导航啊！并且符合网站标准。效果相当不错哦！

<!DOCTYPE<a href="/page/article/search.asp?query= html" target="_blank" title=" html"> html</a> PUBLIC "-//W3C//DTD <a href="/page/article/search.asp?query=XHTML" target="_blank" title="XHTML">XHTML</a> 1.0 Transitional//EN" "http://www.w3.org/TR/<a href="/page/article/search.asp?query=xhtml" target="_blank" title="xhtml">xhtml</a>1/DTD/<a href="/page/article/search.asp?query=xhtml" target="_blank" title="xhtml">xhtml</a>1-transitional.dtd"> <<a href="/page/article/search.asp?query=;html" target="_blank" title=";html">;html</a> xmlns="http://www.w3.org/1999/<a href="/page/article/search.asp?query=xhtml" target="_blank" title="xhtml">xhtml</a>"> <head> <title>Horizontal Drop Down Menus---建站学www.jzxue.com</title> <meta http-equiv="Content-Type" content="text<a href="/page/article/search.asp?query=/html" target="_blank" title="/html">/html</a>; charset=gb2312" /> <script type=text/javascript> /** *菜单的构造,需要绑定到onload */ startList = function() { if (document.all&&document.getElementById) { dropmenuRoot = document.getElementById("dropmenu"); for (i=0; i<dropmenuRoot.childNodes.length; i++) { node = dropmenuRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmou<a href="/page/article/search.asp?query=seo" target="_blank" title="seo">seo</a>ver=function() { this.className+=" over"; //开始灌水 for(j=0;j<this.childNodes.length;j++){ if (this.childNodes[j].nodeName=="UL"){ if (this.childNodes[j].childNodes[0].nodeName=="LI"){ if (this.offsetLeft+this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft>dropmenuRoot.offsetWidth){ var len=this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth; //菜单的长度 (len>dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=776+"px" : this.childNodes[j].style.width=len+"px"; //给ul设置宽度如果子菜单比较多，大于容器的宽度，那么ul的宽度就是容器的宽度 len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth; (len>this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=-(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=-len+"px"; } } } } } //灌水完毕 node.onmou<a href="/page/article/search.asp?query=seo" target="_blank" title="seo">seo</a>ut=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> </head> <style type="text/<a href="/page/article/search.asp?query=css" target="_blank" title="css">css</a>"> body { font: normal 11px verdana; background: #45b97c; position:absolute } ul { margin: 0; padding: 0; } li { list-style-position: outside; list-style: none;} a { text-decoration: none; color: #666;} ul#dropmenu,ul#dropmenu ul{ margin: 0 auto; text-align: left; padding: 0; list-style: none; z-index: 99; } ul#dropmenu { width: 774px; display: block; height: 24px; clear: both; border: 1px solid #ccc; text-align: center; background: #fff; } ul#dropmenu li { position: relative; z-index: 999; float: left; } ul#dropmenu ul li{ float: left; display: block; } ul#dropmenu ul { /*width: 122px; w\idth: 120px;*/ height: auto; position: absolute; text-align: left; left: 0px; display: none; border: solid 1px #ccc; } /*当鼠标在子菜单和父菜单上时，父菜单的样式*/ ul#dropmenu li.over a,ul#dropmenu li:hover a{ border-color: #ccc; background: #c00; color: #fff; } /*将子菜单的样式清除*/ ul#dropmenu li.over ul a,ul#dropmenu li:hover ul a{ font-weight: normal; color: #666; background: #fff;; } /*子菜单的hover样式*/ ul#dropmenu li.over ul a:hover,ul#dropmenu li:hover ul a:hover{ font-weight: normal; color: #cc0000; font-weight: bold; background: #f6f6f6; } /* Styles for Menu Items */ ul#dropmenu a { display: block; padding: 0 0 0 10px; width: 106px; w\idth: 96px; color: #666; line-height: 24px; } ul#dropmenu ul li{ width: 110px; border: 0; } /* End */ ul#dropmenu ul a { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* 透明 */ padding: 2px 0px 2px 10px; border: 0; width: 120px; w\idth: 110px;/* Sub Menu Styles */ } ul#dropmenu li:hover ul,ul#dropmenu li.over ul { display: block; /* The magic */ } </style> <body> <div id="nav"> <ul id="dropmenu"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> </ul> </li> <li><a href="#">Home</a></li> </ul> </div> </body> <<a href="/page/article/search.asp?query=/html" target="_blank" title="/html">/html</a>>

上一篇：web2.0下的网站建设如何定位下一篇：新手提问:如何制作网页?

您可能要找的相关内容

文章评论共(0)条

最近更新教程文章

DIV+CSS浏览器兼容方法的总结(下)

DIV+CSS浏览器兼容方法的总结(下) 7 清除浮动

DIV+CSS浏览器兼容方法的总结(上)

DIV+CSS浏览器兼容方法的总结(上) 接触DIV+CSS架构已经快两年了，个人觉得css入门不难，但要学精并非一朝一夕的，现在大部分网络公司都比较主张用div+css来布局，这就面临着一个比较难的问题——浏览器的兼容性。下面整理了一下相关的兼容问题，希望大家再在其基础上补充！

DIV+CSS网页布局,注意不要乱用DIV和class

DIV+CSS网页布局,注意不要乱用DIV和class 不知道什么时候开始,对于DIV+CSS网页布局大家都非常热情.在各大网页制作论坛中,也都有着应该是继续用TABLE呢,还是全部用DIV+CSS的讨论. 经过一段时间,大家基本认同了DIV+CSS网页布局.

彻底弄懂CSS盒子模式(DIV+CSS)

彻底弄懂CSS盒子模式DIV+CSS 非常好的DIV布局原理与实例教程,对WEB标准布局有兴趣的朋友可以看看以下内容

Web标准,彻底弄懂CSS盒子模式三:定位强化练

Web标准,彻底弄懂CSS盒子模式三:定位强化练习[2] 三、分析实现方法 1．从上面的截图可以看到有一标题，标题下面是一个列表

Web标准,彻底弄懂CSS盒子模式三:定位强化练

Web标准,彻底弄懂CSS盒子模式三:定位强化练习[1] 在本人上一篇教程《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》中最后有演示一个综合导航实例

Web标准,彻底弄懂CSS盒子模式三:绝对定位和

Web标准,彻底弄懂CSS盒子模式三:绝对定位和相对定位[3] （8）放置绝对定位对像到可视区外会出现滚动条。一般情况下，绝对定位是用来方便定位网页要看得见元素的，而不是拿它来隐藏对象的

Web标准,彻底弄懂CSS盒子模式三:绝对定位和

Web标准,彻底弄懂CSS盒子模式三:绝对定位和相对定位[2] （4）相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动

Web标准,彻底弄懂CSS盒子模式三:绝对定位和

Web标准,彻底弄懂CSS盒子模式三:绝对定位和相对定位[1] 前言在用CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时

Web标准,彻底弄懂CSS盒子模式三:浮动的表演

Web标准,彻底弄懂CSS盒子模式三:浮动的表演和清除的自述[3] 7.下面这个例子很重要，可以说明浮动元素的很多特性，大家运行代码框后再手动调整浏览器窗口大小，看版面有什么变化

Web标准,彻底弄懂CSS盒子模式三:浮动的表演

Web标准,彻底弄懂CSS盒子模式三:浮动的表演和清除的自述[2] 4．浮动对象有负边界的情况，这时浮动对象可能会漂浮到其所在父对象外边去，这有点像绝对定位的效果，但又与绝对定位不同

Web标准,彻底弄懂CSS盒子模式三:浮动的表演

Web标准,彻底弄懂CSS盒子模式三:浮动的表演和清除的自述[1] 一、下面请看float的精彩表演，有请。大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。

Web标准,彻底弄懂CSS盒子模式二:导航栏实例

Web标准,彻底弄懂CSS盒子模式二:导航栏实例详解　　自本人教程《彻底弄懂CSS盒子模式(DIV布局快速入门)》发表以来，一直获得各位网友的好评与支持，今天应各位网友的要求，也为了答谢各位网友的支持，本人将推出续篇教程，以加深各位网友对CSS盒子模式的理解

Web标准,彻底弄懂CSS盒子模式一:DIV布局快速

Web标准,彻底弄懂CSS盒子模式一:DIV布局快速入门前言如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网

web标准的网页中使用特殊字符

web标准的网页中使用特殊字符在最开始学习web标准的时候有这么一条

加入收藏 | 设为主页 | 联系站长 | 广告合作 | 浙ICP备08007822号
网站制作教程网站长：iawsky QQ:16844470

Email:iaw2001200@163.com
网站制作教程网QQ群，群1：60695791(满) 群2：72475173(满) 群3：62446341(满) VIP群1：48312553(满) VIP群2：82647819(满) VIP群3：45930352
本站声明：站内部分文章来源于网络转载仅供大家学习使用，如有侵犯您的权益请和本站联系，本站将在24小时内处理。
江西九江公安局备案

轻松学习如何制作网页、如何制作网站就上网站制作教程网-WWW.WEB2BAR.CN