教程集 > 脚本编程 > javascript > 正文 js 导航栏下拉菜单代码

js 导航栏下拉菜单代码

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

教程集为您提供js 导航栏下拉菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的js 导航栏下拉菜单代码资源

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

<textarea name="runcool" rows="28" cols="75" >js 导航栏下拉菜单代码 <ul id="menu"> <li>Home</li> <li>Single Level</li> <li class="current">Dropdown <ul class="sub1"> <li>Dropdown one <ul class="fly1"> <li>Dropdown 1.1</li> <li>Dropdown 1.2</li> <li>Dropdown 1.3</li> <li>Dropdown 1.4</li> <li>Dropdown 1.5</li> <li>Dropdown 1.6</li> </ul> </li> <li class="currentsub">Dropdown two <ul class="fly2"> <li>Dropdown 2.1</li> <li>Dropdown 2.2</li> <li class="currentfly">Dropdown 2.3</li> <li>Dropdown 2.4</li> <li>Dropdown 2.5</li> </ul> </li> <li>Dropdown three</li> <li>Dropdown four</li> <li>Dropdown five <ul class="fly3"> <li>Dropdown 5.1</li> <li>Dropdown 2.2</li> <li>Dropdown 3.3</li> </ul> </li> </ul> </li> <li>Dropline <ul class="sub2"> <li>Dropline one</li> <li>Dropline two</li> <li>Dropline three</li> <li>Dropline four</li> <li>Dropline five</li> <li>Dropline six</li> </ul> </li> <li>Flyout <ul class="sub3"> <li>Flyout one</li> <li>Flyout two</li> <li>Flyout three</li> <li>Flyout four</li> </ul> </li> <li id="support">Support</li> <li id="contact">Contact</li> </ul> <style> ul#menu {padding:0; list-style:none; background:url(http://www.jiaochengji.com/blog/upload/image/20091216074559.gif); text-align:center; margin:0 auto; font-size:11px; font-family:arial, sans-serif; height:41px; width:1000px; position:absolute; left:0; top:139px;} ul#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px;} ul#menu table {border-collapse:collapse; font-size:1em; float:left; margin:-1px;} ul#menu ul li {float:left; margin:0; text-align:left;} ul#menu ul li a {display:block; line-height:20px; margin:0; padding:0 10px; background:transparent; width:150px;} ul#menu li {display:inline; margin:0 -2px; text-align:left;} ul#menu li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0 20px 0 0; background:url(http://www.jiaochengji.com/blog/upload/image/20091216074624.gif) right top; line-height:30px; text-decoration:none; color:#000;} ul#menu li a.sub {background:url(http://www.jiaochengji.com/blog/upload/image/20091216074645.gif) right top;} html>/**/body ul#menu li {display:inline-block; padding:0;} * html ul#menu li a.sub {margin-right:3px;} * html ul#menu li a {margin-bottom:-4px;} ul#menu li a b {display:block; height:36px; float:left; padding:0 0 0 20px; background:url(http://www.jiaochengji.com/blog/upload/image/20091216074624.gif) left top; cursor:pointer;} ul#menu li a:hover {position:relative; background-position:right bottom; color:#fff;} ul#menu li a:hover b {background-position:left bottom;} ul#menu li:hover {position:relative;} ul#menu li:hover > a {background-position:right bottom; color:#fff;} ul#menu li:hover > a b {background-position:left bottom;} ul#menu :hover ul {left:1px; width:105px; top:41px;} * html ul#menu :hover ul {top:36px;} ul#menu :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;} ul#menu :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; width:95px; background:#ddd; color:#000;} ul#menu :hover ul li a.fly {background:#ddd url(http://www.jiaochengji.com/blog/upload/image/20091216074435.gif) no-repeat right center;} ul#menu :hover ul li a:hover {background:#c60; color:#fff;} ul#menu :hover ul li:hover > a {background:#c60; color:#fff;} ul#menu :hover ul li a.fly:hover {background:#c60 url(http://www.jiaochengji.com/blog/upload/image/20091216074529.gif) no-repeat right center;} ul#menu :hover ul li:hover > a.fly {background:#c60 url(http://www.jiaochengji.com/blog/upload/image/20091216074529.gif) no-repeat right center;} ul#menu :hover ul ul {left:-9999px;} ul#menu :hover ul :hover ul {left:105px; top:0; width:150px;} ul#menu :hover ul :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;} ul#menu :hover ul :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; background:#bbb; color:#000;} ul#menu :hover ul :hover ul li a:hover {color:#fff; background:#840;} </style></textarea>

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

您可能感兴趣的文章：
jQuery菜单插件 Smooth Navigational Menu
js 符合web标准二级下拉导航菜单
 7款风格新颖的jQuery/CSS3菜单导航分享
 JavaScript下拉菜单
 jquery 遮罩层效果实现的导航菜单
 jquery-easyui创建下拉菜单的例子
 JQuery实现鼠标滑过显示导航下拉列表
 jquery遮罩层效果实现导航菜单代码
 div css 二级下拉菜单导航代码
 路径式导航栏 xBreadcrumbs

上一篇：js 下拉菜单下一篇：javascript css tab 切换菜单效果

[关闭]

js 导航栏下拉菜单代码

最近更新

浏览排行