教程集 > 脚本编程 > javascript > 正文 css 三级横向弹出菜单

css 三级横向弹出菜单

发布时间：2016-10-17 编辑：jiaochengji.com

教程集为您提供css 三级横向弹出菜单等资源，欢迎您收藏本站，我们将为您提供最新的css 三级横向弹出菜单资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dropline-水平三级横向弹出菜单</title> <style type="text/css"> /* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} .menu ul {padding:0; margin:0; list-style-type: none;} .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#b3ab79;} .menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} .menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} .menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li:hover ul.right li {float:right;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} </style> </head> <body> </body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 无限级横向下拉导航菜单效果
 横向javascript下拉二级菜单效果
 学习从实践开始之jQuery插件开发菜单插件开发
 导航菜单-三级折叠竖向下拉导航菜单效果
 css 水平横向导航菜单效果
 JQuery实现绚丽的横向下拉菜单
 js 三级折叠菜单代码效果
 jQuery菜单插件 Superfish
jquery 动态菜单的实现代码分享
 css3中flexbox伸缩盒深入理解

上一篇：js tree树形折叠菜单效果下一篇：怎样用JavaScript定义一个类

[关闭]

css 三级横向弹出菜单

最近更新

浏览排行