100素材网
首页
jquery特效
网页素材
网页特效
网站模板
图片素材
关键字搜索
button.css
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
站长空间
CSS3 动画大全在线演示
网站后台管理系统
button.css
由
100素材网
开发，欢迎广大前端码农使用。有好的建议欢迎给我们
留言
哦！
Nicole McIntyre
发布于
二级导航
网页制作
网页导航菜单
CSS黑色超酷多级菜单
文章来源：
100素材网
更新时间：
2014-04-11 15:03:09
二级导航
三级导航
导航特效
导航代码
<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> body { margin: 7px; font:12px Verdana, Arial, Helvetica, sans-serif; } * { list-style-type: none; margin: 0px; padding: 0px; border: thin none; } #nav { position: absolute; font-size: 9px; opacity: 0.8; } #nav a { display: block; width: 100px; height: 15px; padding: 3px 5px 12px; background: #666; color: #fff; text-decoration: none; } #nav a:hover { background: #333; } #nav li { float: left; clear: left; width: 120px; background: #ccc; padding-bottom: 3px; } #nav ul { position: absolute; margin-left: 115px; margin-top: -30px; } #nav ul { display: none; } #nav li.show ul { display: block; } #nav li.show li ul { display: none; } #nav li li.show ul { display: block; } </style> <script language="javascript" type="text/javascript"> 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? " ": "") + "show"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)show\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> </ul> </li> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> <li><a href="#">100素材网</a> <ul> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> <li><a href="#">100素材网</a></li> </ul> </li> </ul> </body> </html>
在线演示
浏览次数
次
react源码系统
vue源码系统
vue + typeScript源码系统
上一篇文章：
CSS横向下拉菜单
下一篇文章：
CSS动态滑动菜单
推荐阅读：
html5 web mobile手机网页视频播放器代码
制作云标签特效的jQuery tagcloud插件下载
css3圆角二级导航菜单jQuery滑动收缩展开特效代码
网页滑动返回顶部jQuery插件代码
bootstrap网页图片上传控件样式特效代码
网页table表格头部和左侧固定的jquery插件代码
当滚动条滚动时图片悬浮固定于网页顶部的jquery特效代码
jquery时钟秒表倒计时组件js代码
相关代码：
CSS动态滑动菜单
浏览器全屏浮动广告代码
一款兼容IE6悬浮工具栏特效代码
经典威客轮播滚动特效代码
仿新浪微博信息无缝滚动
仿腾讯微博内容定时向上滚动特效
仿新浪微博文字向下滚动特效
js文字滚动特效
信息栏文字滚动js特效代码
文字左右无间断滚动特效
文字上下无间断滚动特效
双行文字向上滚动特效代码
标签分类
瀑布流
幻灯片
焦点图
导航条
404
鼠标特效
css3按钮
checkBox
js相册特效
滚动条
抽奖
日历
圆盘抽奖
圆盘时钟
菜单栏
广告
提示文字
图片文字
css3圆角
选项卡
收缩展开
计时器
网页布局
响应式网站模板
树形菜单
木马旋转
表单美化
登录界面
下拉列表
图片叠加
网页背景
缩略图
放大镜图片
select美化
图片拖动
大图切换
日历选择器
table
拖拽
对联广告
html5游戏
二维码
图片延迟加载
进度条
搜索框
提示框
表单验证
倒计时
图片悬停
jQuery 选择器
统计图
柱状图
折线图
二级联动
视频播放器
文字无缝滚动
文字特效
图片动画
固定导航
图片手风琴
图片旋转
标签云
编辑器
分页插件
单选按钮
tab切换
图片裁剪
计算器
贪吃蛇
俄罗斯方块
加载动画
分页
网页按钮
css3阴影
css3
css3动画
Tree树形
游戏场景
渐变背景
图片渐变切换
canvas
表头固定
css3文字
筛选项
月亮
css3背景
svg
图片滑动
css3翻转
图片滚动
文字滚动
网页特效
3d立方体
返回顶部
刮刮乐
锚点滑动
时间代码
星级评分
vue插件
悬浮固定
CSS3和Html5
图表与图形
表单验证
导航菜单
table选项卡
视频播放器
日期和时间
返回顶部
图层代码
滚动代码
幻灯片
文字特效
图片放大镜
juqery焦点图
瀑布流
广告悬浮代码
在线客服
网页导航菜单
时间倒计时
Jquery教程
wap手机网站教程
javascript教程
CSS3教程
网页基础
php
html
图片表情
手机网站模板
放大镜图片
网页小游戏
按钮开关
bootstrap插件
loading
vue插件
站长空间
站长博客
推荐阅读：
