网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
导航菜单
> 正文
div+CSS的无限级扩展下拉菜单(全部加了注释)
深山行者个人网站 2009/8/15 9:26:32 深山行者 字体:
大
中
小
浏览 17915
以下为详细代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="robots" content="all" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="bookmark" href="/favicon.ico" type="image/x-icon" /> <title>div+CSS的无限级扩展下拉菜单</title> <style type="text/css"> <!-- *{margin:0;padding:0;} img{border:0;} body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;} .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;} a:link{ color:#000; text-decoration:none; } a:visited{ color:#000; text-decoration:none; } a:hover{ color:#000; text-decoration:underline; } .menubg{ background: url(http://home.blueidea.com/attachment/200908/13/285026_1250155294g9FX.png) 0 -90px ; height: 29px;} .menu{ width: 920px; margin: auto;} .menusel{ float:left;width:131px; position:relative; height:29px; line-height:29px; *line-height: 30px;} .menusel h2{height:29px; font-family:"microsoft yahei"; position: relative; z-index: 9;} .menusel h2 a:link,.menusel h2 a:visited{ font-weight: 400; font-size: 14px; color: #fff;} .menusel h2 a:hover{ text-decoration: none;} .menusel a:link,.menusel a:visited{ width:131px; display: block; text-align:center; font-size: 14px;font-family:"microsoft yahei"; position:relative; z-index:2;} .menusel a:hover{ position:relative; z-index:2; height:25px;} .menusel div{ width:131px;position:absolute; z-index:1;margin-top: -1px;} .menusel ul{ width:131px; background:#356290; border:1px solid #2b5076;border-top:1px solid #356290;margin-top:0; position:relative; z-index:1; display:none;} .menusel .block{ display:block;} .menusel ul li{border-bottom:1px dashed #658fbc; position:relative; float:left; height: 26px;} .menusel ul li a{ border:none;} .menusel ul li a:link,.menusel ul li a:visited,.typeul li a:visited{font-size: 12px;height: 26px; color: #fff;} .menusel ul li a:hover{background:#2b4e73;font-size: 14px; color: #fff;height: 26px;line-height: 26px;} .menusel ul{ margin-left:0; } .menusel ul li ul{left:131px; top:-1px; position:absolute;} .menusel .lli{ border:none; } .h2hover{ background: url(http://home.blueidea.com/attachment/200908/13/285026_1250155294kip2.png) center no-repeat;height: 26px;} .h2hover a:link,.h2hover a:visited{ color: black!important ;} --> </style> </head> <body> <!--menubg start--> <div class="menubg"> <!--menu start--> <div class="menu"> <!-- menu1 start --> <div id="menu1" class="menusel"> <h2><a href="index.html">我是菜单1</a></h2> <div> <!--1 start--> <ul> <li><a href="">一一一级 01</a></li> <li><a href="">一一一级 02</a> <!--2 start--> <ul> <li><a href="">第222菜单 01</a></li> <li><a href="">第222菜单 02</a> <!--3 start--> <ul> <li><a href="">33333333_01</a></li> <li><a href="">33333333_02</a> <!--4 start--> <ul> <li><a href="">4444级菜单里的01</a></li> <li> <a href="">4444级菜单里的02</a> <!--5 start--> <ul> <li><a href="">这个是第五级菜单</a></li> </ul> <!--5 end--> </li> </ul> <!--4 end--> </li> <li><a href="">33333333_03</a></li> </ul> <!--3 end--> </li> <li><a href="">第222菜单 03</a></li> <li><a href="">第222菜单 04</a></li> </ul> <!--2 start--> </li> <li><a href="">一一一级 03</a></li> <li><a href="">一一一级 04</a></li> <li><a href="">一一一级 05</a></li> </ul> <!--1 end--> </div> </div> <!-- menu1 end --> <!-- menu2 start --> <div id="menu2" class="menusel"> <h2><a href="business.html">我是菜单2</a></h2> <div> <ul> <li><a href="">游戏业务部</a></li> <li><a href="">游戏开发组</a></li> <li><a href="">游戏事业部</a></li> <li><a href="">海外事业部</a></li> </ul> </div> </div> <!-- menu2 end --> <!-- menu3 start --> <div id="menu3" class="menusel"> <h2><a href="cooperation.html">我是菜单3</a></h2> <div> <ul> <li><a href="">商业技术合作</a></li> <li><a href="">网 站 合 作</a></li> <li><a href="">客户服务中心</a></li> </ul> </div> </div> <!-- menu3 end --> <!-- menu4 start --> <div id="menu4" class="menusel"> <h2><a href="news.html">我是菜单4</a></h2> <div> <ul> <li><a href="">公 司 动 态</a></li> <li><a href="">发 展 历 程</a></li> <li><a href="">开 发 进 度</a></li> <li><a href="">其 他 新 闻</a></li> </ul> </div> </div> <!-- menu4 end --> <!-- menu5 start --> <div id="menu5" class="menusel"> <h2><a href="culture.html">我是菜单5</a></h2> <div> <ul> <li><a href="">我们的憬愿</a></li> <li><a href="">品 牌 战 略</a></li> <li><a href="">公 司 标 志</a></li> </ul> </div> </div> <!-- menu5 end --> <!-- menu6 start --> <div id="menu6" class="menusel"> <h2><a href="recruitment.html">我是菜单6</a></h2> <div> <ul> <li><a href="">社 会 招 聘</a></li> <li><a href="">校 园 招 聘</a></li> <li><a href="">现 场 招 聘</a></li> <li><a href="">投 递 简 历</a></li> </ul> </div> </div> <!-- menu6 end --> <!-- menu7 start --> <div id="menu7" class="menusel"> <h2><a href="services.html">我是菜单7</a></h2> <div> <ul> <li><a href="">网站客户服务</a></li> <li><a href="">游戏客户服务</a></li> </ul> </div> </div> <!-- menu7 end --> </div> <!-- menu end--> </div> <!-- menubg end--> <script type="text/javascript"> for(var x = 1; x < 8; x++) { var menuid = document.getElementById("menu"+x); type(); } function type() { var menuh2 = menuid.getElementsByTagName("h2"); var divs = menuid.getElementsByTagName("div"); var alluls = divs[0].getElementsByTagName("ul"); var menuli = alluls[0].getElementsByTagName("li"); menuh2[0].onmouseover = show; menuh2[0].onmouseout = unshow; alluls[0].onmouseover = show; alluls[0].onmouseout = unshow; function show() { alluls[0].className = "clearfix block" /*menuul[0].lastChild.className = "lli";*/ function getChildRen(x) { var arry = new Array; var c = x.childNodes; for (var i = 0; i < c.length; i++) { if (c[i].nodeType == 1) { arry.push(c[i]) } } return arry; } for(var i = 0; i < alluls.length; i++) { var ok = getChildRen(alluls[i]); ok[ok.length-1].className = "lli"; } /*alert(alluls[0].offsetHeight)*/ menuh2[0].className = "h2hover" } function unshow() { alluls[0].className = "" menuh2[0].className = "" } for(var i = 0; i < menuli.length; i++) { menuli[i].num = i; var liul = menuli[i].getElementsByTagName("ul")[0]; if(liul) { typeshow() } } function typeshow() { menuli[i].onmouseover = showul; menuli[i].onmouseout = unshowul; } function showul() { menuli[this.num].getElementsByTagName("ul")[0].className = "block"; menuli[this.num].getElementsByTagName("ul")[0].lastChild.className ="lli"; } function unshowul() { menuli[this.num].getElementsByTagName("ul")[0].className = ""; } } </script> </body> </html>
前一页:
没有了
后一页:
经典的仿蓝色理想TAB横向下拉菜单效果
相关阅读
连云港华夏国际旅行社
ASP中控制输出字符串的长度
asp数组随机排序
青海众信国际旅行社有限公司
经典实用的触发型导航菜单
静态页面在文本框中输入数字，表格直接算出相应的结果
福建省武夷山旅行社官方网站
利用java控制图片的大小
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
div+CSS的无限级扩展下拉菜单(全部加了注释)
经典的仿蓝色理想TAB横向下拉菜单效果
纯div+css制作的弹出菜单-05
纯div+css制作的弹出菜单-04
纯div+css制作的弹出菜单-02
纯div+css制作的弹出菜单-02
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
吉林省天马旅行社
另一个省市二级关联select下拉菜单代码
深山行者旅行社网站管理系统 v1.4
游戏-植物大战僵尸留言板模板
丽江云杉旅行网
一个美化了的alert效果，非常不错。
更多标签
热门标签
简易
站长
滚动
保留
边框
对话框
关联
物理
控件
文件
加减
保护眼睛的电脑色
柱状图
居中
msn
左 右 全 input
利用position把div放在flash上
安装包
相册
instr
插件
网易
原则
压缩
email
框架
密码
跳转
生成
许愿
confirm
采集
盖楼
表单
DIV+CSS做的透明菜单兼容IE、FF等
成功
Abandon
letter-spacing
初级
焦点
绝对
vista
兼容
缩放
透明
弹窗
个性
生成器
数据库
innerText
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号
苏公网安备 32070502010230号