View Code
<!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> <title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(四)</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #171717; } div#menu { margin: 30px auto; width: 80%; } /* menu::base */ div#menu { height: 46px; padding-left: 10px; background: url(http://www.zzsky.cn/effect/images/20122/202245/left.png) no-repeat; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/left.gif); width: auto; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-right: 10px; background: url(http://www.zzsky.cn/effect/images/20122/202245/right.png) no-repeat right 0; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/right.gif); } div#menu li { position: relative; margin: 0; padding: 0 0 0 0; display: block; float: left; z-index: 9; width: auto; } div#menu ul ul li { z-index: 9; } div#menu li div { list-style: none; float: left; position: absolute; z-index: 11; top: 36px; left: 0; visibility: hidden; width: 187px; padding: 0 0 11px 7px; background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 7px bottom; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif); margin: 0px 0 0 -4px; } div#menu li:hover>div { visibility: visible; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; margin-top: 1px; white-space: nowrap; width: auto; padding-right: 5px; text-align: center; } div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; text-align: center; } /* menu::level1 */ div#menu a { padding: 0 30px 0 0; line-height: 40px; height: 46px; margin-right: 5px; _margin-right: 1px; background: none; } div#menu span { margin-top: 2px; padding-left: 30px; color: #fff; font: bold 11px Trebuchet MS,Arial,san-serif; background: none; line-height: 40px; } div#menu a:hover, div#menu a.over { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png) no-repeat right -1px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif); } div#menu a:hover span, div#menu a.over span { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif); } div#menu li.current a, div#menu ul.menu>li:hover>a { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png) no-repeat right -1px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif); } div#menu li.current a span, div#menu ul.menu>li:hover>a span { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif); } div#menu ul.menu>li:hover>a span { color: #043454; } div#menu li {} div#menu li.last { background: none; } div#menu li.current a, div#menu li.current a span, div#menu.js-active a:hover, div#menu.js-active a:hover span, div#menu.js-active a, div#menu.js-active span { background:none; } div#menu.js-active ul.menu>li:hover>a, div#menu.js-active ul.menu>li:hover>a span { background:none; } div#menu li.current a.over { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png) no-repeat right -1px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif); } div#menu li.current a.over span { background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif); } div#menu a.over span { color: #043454; } /* menu::level2 */ div#menu ul ul li { background: none; padding: 0; } div#menu ul ul { padding-top: 10px; } div#menu ul ul a { padding: 0; height: auto; float: none; display: block; line-height: 26px; font-size: 11px; color: #ffffff; z-index: -1; padding-left: 5px; white-space: normal; width: 160px; margin: 0 5px; text-transform: none; } div#menu ul ul a span { padding: 0 15px; line-height: 26px; font-size: 11px; } div#menu li.current ul a, div#menu li.current ul a span { background:none; } div#menu ul ul a:hover { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-bottom.png) no-repeat 5px bottom; } div#menu ul ul a:hover span { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0; } div#menu ul ul a.parent { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-bottom.gif) no-repeat 5px bottom; } div#menu ul ul a.parent span { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-top.png) no-repeat 0 0; } div#menu ul ul a.parent:hover { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-selected-bottom.png) no-repeat 5px bottom; } div#menu ul ul a.parent:hover span { background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0; } div#menu ul ul span { margin-top: 0; text-align: left; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul div { width: 180px; padding: 15px 0px 8px 0px; margin: -44px 0 0 169px !important; background: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.png) no-repeat 0px 0; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.gif); } *+html div#menu ul ul div { height:10px } *+html div#menu.ie7 ul ul div { height:auto } div#menu ul ul ul { padding: 0 4px 5px 1px; background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 0px bottom; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif); } div#menu ul ul div li { position:relative; top:-5px; } /* lava lamp */ div#menu li.back { background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.png) no-repeat 0 0; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.gif); width: 10px; height: 46px; z-index: 8; position: absolute; padding: 0; margin: 0; } div#menu li.back .left { padding:0; width:auto; background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.png) no-repeat right 0; _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.gif); height: 46px; margin: 0 5px 0 10px; _margin-right: 2px; float: none; position: relative; top: 0; left: 0; visibility: visible; } div#copyright { margin: 0 auto; width: 80%; font: 11px 'Trebuchet MS'; color: #124a6f; text-indent: 20px; padding: 40px 0 0 0; } div#copyright a { color: #4682b4; } div#copyright a:hover { color: #124a6f; } </style> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/jquery.js"></script> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/menu.js"></script> </head> <body> <span style="color:#ffffff;">预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。</span><br> <!--把下面代码加到<body>与</body>之间--> <div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Home</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Product Info</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1</span></a></li> <li><a href="#"><span>Sub Item 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <div><ul> <li><a href="#"><span>Sub Item 2.1</span></a></li> <li><a href="#"><span>Sub Item 2.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 3</span></a></li> <li><a href="#"><span>Sub Item 4</span></a></li> <li><a href="#"><span>Sub Item 5</span></a></li> <li><a href="#"><span>Sub Item 6</span></a></li> <li><a href="#"><span>Sub Item 7</span></a></li> </ul></div> </li> <li><a href="#"><span>Help</span></a></li> <li class="last"><a href="#"><span>Contacts</span></a></li> </ul> </div> <div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div> </body> </html>
View Code 2
<!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> <title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(一)</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> * { margin: 0; padding: 0; } body { background: rgb(74,81,85); } div#menu { margin: 5px auto; } /* menu::base */ div#menu { height: 41px; background: url(http://www.zzsky.cn/effect/images/20122/202200/main-bg.png) repeat-x; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover>ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer.gif); } div#menu ul ul a.parent:hover span { background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color: #e5e5e5; } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background: url(http://www.zzsky.cn/effect/images/20122/202200/main-delimiter.png) 98% 4px no-repeat; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background: rgb(45,45,45); margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color: rgb(169,169,169); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color: rgb(169,169,169); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat right -44px !important; background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat top left !important; background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif); height: 44px; margin-right: 8px; } div#copyright { font: 11px 'Trebuchet MS'; color: #222; text-indent: 30px; padding: 40px 0 0 0; } div#copyright a { color: #aaa; } div#copyright a:hover { color: #222; } </style> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/jquery.js"></script> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/menu.js"></script> </head> <body> <span style="color:#ffffff;">预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。</span><br> <!--把下面代码加到<body>与</body>之间--> <div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Home</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </li> <li><a href="#" class="parent"><span>Product Info</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <ul> <li><a href="#"><span>Sub Item 1.1</span></a></li> <li><a href="#"><span>Sub Item 1.2</span></a></li> </ul> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <ul> <li><a href="#"><span>Sub Item 2.1</span></a></li> <li><a href="#"><span>Sub Item 2.2</span></a></li> </ul> </li> <li><a href="#"><span>Sub Item 3</span></a></li> <li><a href="#"><span>Sub Item 4</span></a></li> <li><a href="#"><span>Sub Item 5</span></a></li> <li><a href="#"><span>Sub Item 6</span></a></li> <li><a href="#"><span>Sub Item 7</span></a></li> </ul> </li> <li><a href="#"><span>Help</span></a></li> <li class="last"><a href="#"><span>Contacts</span></a></li> </ul> </div> <div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div> </body> </html>