100素材网
首页
jquery特效
网页素材
网页特效
网站模板
图片素材
关键字搜索
button.css
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
站长空间
CSS3 动画大全在线演示
网站后台管理系统
button.css
由
100素材网
开发，欢迎广大前端码农使用。有好的建议欢迎给我们
留言
哦！
Nicole McIntyre
发布于
二级横向导航条
网页制作
网页导航菜单
CSS横向下拉网页菜单代码
文章来源：
100素材网
更新时间：
2014-04-25 17:33:14
二级横向导航条
面包导航
多级导航代码
多层次的树状菜单
<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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>CSS横向下拉菜单代码</title> <style type="text/css"> <!-- * {margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { height: 24px; list-style-type: none; padding-left:200px; line-height:24px;overflow:hidden;background:#999; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#EEE; text-decoration:none; } #nav a:visited { color:#EEE;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; } #nav li { float: left; width: 80px; } #nav li ul { line-height: 24px; list-style-type: none; text-align:left; left: -999px; width: 520px; //注意,这里一定要设置宽度; position: absolute; background:#CCC; } #nav li ul li{ float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float } #nav li ul a{ display: block; width: 65px;text-align:left;padding-left:15px; } #nav li ul a:link { color:#F1F1F1; text-decoration:none; } #nav li ul a:visited { color:#F1F1F1;text-decoration:none; } #nav li ul a:hover { color:#FFF;text-decoration:none;font-weight:normal;background:#C00; } #nav li:hover ul { left:25%; } #nav li.sfhover ul { left:25%; } #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].onmouseover=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].onmouseout=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> </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> </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> </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> </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> </ul> </li> </ul> </div> </body> </html>
在线演示
浏览次数
次
react源码系统
vue源码系统
vue + typeScript源码系统
上一篇文章：
css三级横向导航条网页菜单代码
下一篇文章：
仿腾讯新浪微博实时更新图片文本信息向下滚动JS特效代码
推荐阅读：
html5 web mobile手机网页视频播放器代码
制作云标签特效的jQuery tagcloud插件下载
css3圆角二级导航菜单jQuery滑动收缩展开特效代码
网页滑动返回顶部jQuery插件代码
bootstrap网页图片上传控件样式特效代码
网页table表格头部和左侧固定的jquery插件代码
当滚动条滚动时图片悬浮固定于网页顶部的jquery特效代码
jquery时钟秒表倒计时组件js代码
相关代码：
仿腾讯新浪微博实时更新图片文本信息向下滚动JS特效代码
jsTAB切换和Radio切换网页代码特效
纯CSS+HTML网页下拉菜单导航条
横向弹出的二级网页导航条菜单代码
一个简洁易用的TAB网页导航条菜单
黑色风格多级弹出网页导航条菜单特效
js特效仿腾讯首页TAB选项卡的代码
仿博客风格的黑色网页导航条菜单特效
css仿腾讯网多行多列导航菜单效果
阿里妈妈竖向选项卡js特效网页脚本
js特效鼠标hover滑动门导航栏
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插件
站长空间
站长博客
推荐阅读：
