欢迎来到HTML5中文学习网！
首页
JS代码
焦 点 图
全屏广告
对联广告
在线客服
相册代码
菜单导航
TAB标签
悬浮漂浮
视频播放
图片特效
翻牌书角
其他代码
导航菜单
表单按钮
文字特效
表格图层
图片特效
时间日期
滚动代码
窗口特效
颜色背景
网站常用
CSS样式
其他特效
html5教程
网站及特效实例
教程视频
html5资讯
bootstrap
HTML5演示
HTML5论坛
当前位置：
首页
>
JS代码
>
JS特效代码
>
导航菜单
纯div+css制作的弹出菜单-02
2009-06-08 来源/作者：HTML5中文学习网 分类：
导航菜单
«
»
<!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=utf-8" /> <title>三级dropdown弹出菜单</title> <style type="text/css"> /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} </style> <!--[if lte IE 6]> <style type="text/css"> .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;} </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="#menu/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/index.html'" tppabs="#menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="#menu/zero_dollars.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/zero_dollars.html'" tppabs="#menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="#menu/embed.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/embed.html'" tppabs="#menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="#menu/form.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/form.html'" tppabs="#menu/form.html" title="Styling forms">styled form</a></li> <li><a href="#menu/nodots.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/nodots.html'" tppabs="#menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="#menu/hover_click.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/hover_click.html'" tppabs="#menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="#menu/form.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/form.html'" tppabs="#menu/form.html" title="Styling forms">styled form</a></li> <li><a href="#menu/nodots.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/nodots.html'" tppabs="#menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="#menu/hover_click.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/hover_click.html'" tppabs="#menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="#menu/shadow_boxing.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/shadow_boxing.html'" tppabs="#menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="#menu/old_master.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/old_master.html'" tppabs="#menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="#menu/bodies.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/bodies.html'" tppabs="#menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="#menu/fade_scroll.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/fade_scroll.html'" tppabs="#menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="#menu/em_images.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/em_images.html'" tppabs="#menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#layouts/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/index.html'" tppabs="#layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="#layouts/bodyfix.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/bodyfix.html'" tppabs="#layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="#layouts/body2.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/body2.html'" tppabs="#layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="#layouts/body4.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/body4.html'" tppabs="#layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="#layouts/body5.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/body5.html'" tppabs="#layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="#layouts/minimum.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#layouts/minimum.html'" tppabs="#layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#boxes/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#boxes/index.html'" tppabs="#boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="../index.htm" tppabs="http://www.html5cn.com.cn/js/js/circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#mozilla/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/index.html'" tppabs="#mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="#mozilla/dropdown.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/dropdown.html'" tppabs="#mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="#mozilla/cascade.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/cascade.html'" tppabs="#mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="#mozilla/content.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/content.html'" tppabs="#mozilla/content.html" title="Using content:">content:</a></li> <li><a href="#mozilla/moxbox.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/moxbox.html'" tppabs="#mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="#mozilla/rainbow.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/rainbow.html'" tppabs="#mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="#mozilla/snooker.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/snooker.html'" tppabs="#mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="#mozilla/target.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/target.html'" tppabs="#mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="#mozilla/splittext.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/splittext.html'" tppabs="#mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="#mozilla/shadow_text.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#mozilla/shadow_text.html'" tppabs="#mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#ie/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#ie/index.html'" tppabs="#ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="#ie/exampleone.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#ie/exampleone.html'" tppabs="#ie/exampleone.html" title="Example one">example one</a></li> <li><a href="#ie/weft.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#ie/weft.html'" tppabs="#ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="#ie/exampletwo.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#ie/exampletwo.html'" tppabs="#ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#opacity/index.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#opacity/index.html'" tppabs="#opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="#opacity/colours.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#opacity/colours.html'" tppabs="#opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="#opacity/picturemenu.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#opacity/picturemenu.html'" tppabs="#opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="#opacity/png.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#opacity/png.html'" tppabs="#opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="#opacity/png2.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#opacity/png2.html'" tppabs="#opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="hide" href="#menu/hover_click.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/hover_click.html'" tppabs="#menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK <table><tr><td> <![endif]--> <ul class="left"> <li><a href="#menu/form.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/form.html'" tppabs="#menu/form.html" title="Styling forms">styled form</a></li> <li><a href="#menu/nodots.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/nodots.html'" tppabs="#menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="#menu/hover_click.html \n\n文件并未依 Teleport Pro 取回，因为 服务器报告未找到此文件。 \n\n你要从服务器上打开它吗？'))window.location='#menu/hover_click.html'" tppabs="#menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html>
运行代码
保存代码
提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。
纯div+css制作三级dropdown弹出菜单
标签：
导航菜单
jquery模仿flash导航
Tips展开关闭问答代码
2007英文网站最具流行的53种网站导航
纯div+css制作的弹出菜单-01
纯div+css制作的弹出菜单-02
纯div+css制作的弹出菜单-03
纯div+css制作的弹出菜单-04
纯div+css制作的弹出菜单-05
猜你也喜欢看这些 ······
Arctext弧形文字效果插件（CSS3&jQuery）
其他代码
2013-02-01
单行文字循环滚动(jQuery)
其他代码
2013-02-01
右侧带缩略图jQuery焦点图代码
焦点图
2013-01-24
css3动态导航菜单模版
菜单导航
2013-01-23
单张放大图片展示效果(jQuery)
图片特效
2013-01-22
这些是最新的 ······
仿邮箱密码色条随输入长度变化
其他特效
2013-01-09
CSS布局：自适应高度的CSS布局
CSS样式
2012-11-20
CSS布局：根据浏览器宽度自动把布局从三栏切换成两栏加底栏
CSS样式
2012-11-19
CSS布局：右栏固定宽度,左栏内容先出现同时自适应宽度
CSS样式
2012-11-19
CSS布局：中栏固定宽度,左右两栏宽度自适应
CSS样式
2012-11-19
