<!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>网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单-www.update8.com</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--把下面代码加到<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: 41px; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; margin: 0; padding: 0 5px 0 0; display: block; float: left; z-index: 9; } div#menu li:hover>ul { left: 0; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; color: rgb(0,191,255); font: normal 22px Helvetica, Arial, sans-serif; border: 1px solid #171717; margin-top: 1px; border-bottom: none; } div#menu.ie6 a { border-color: #171717; filter: chroma(color=#171717); } div#menu li:hover>a { border: 1px solid rgb(14,68,85); border-bottom-color: rgb(24,88,115); background: rgb(24,88,115); } div#menu li:hover>a span { color: #fff; } div#menu a:hover { color: #fff; border: 1px solid rgb(14,68,85); border-bottom-color: rgb(24,88,115); background: rgb(24,88,115); } div#menu.js-active a:hover { border: 1px solid #171717; border-bottom-color: rgb(24,88,115); background: rgb(24,88,115); } div#menu.js-active a:hover span { color: rgb(0,191,255); } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; text-align: center; } div#menu ul ul a.parent span { background-position: 95% 8px; background-image: url(http://www.zzsky.cn/effect/images/20122/202215/item-pointer.gif); } div#menu ul ul a.parent:hover span { background-image: url(http://www.zzsky.cn/effect/images/20122/202215/item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 24px; height: 54px; } div#menu span { margin-top: 5px; color: rgb(0,191,255); font: normal 22px Helvetica, Arial, sans-serif; } div#menu li { } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; padding: 0; border-bottom: 0; } div#menu ul ul li, div#menu ul ul li a { z-index: auto; } div#menu ul ul li ul { z-index: 20; } div#menu ul ul { display: block; position: absolute; top: 55px; left: -999em; width: 163px; padding: 5px 0 0 0; background: rgb(24,88,115); border: 1px solid rgb(14,68,85); margin-top: 1px; } div#menu ul ul a { padding: 0; height: 30px; float: none; display: block; line-height: 26px; font-size: 18px; border: 0; z-index: -1; white-space: nowrap; } div#menu ul ul a span { font-size: 18px; line-height: 26px; color: #fff; } div#menu ul ul li:hover>a { border: 0; } div#menu ul ul a:hover { border: 0; background: rgb(14,68,85); } div#menu ul ul a:hover span { color: #ffa; } 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%; text-indent: 15px; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -54px 0 0 160px !important; margin-left: 160px; } /** menu::subtext */ div#menu span.subtext { display: block; font-size: 12px; color: #ffa; line-height: 16px; margin: 0; padding: 0; } div#menu li:hover>a span.subtext { color: #ffa; } /* lava lamp */ div#menu li.back { position: absolute; width: 10px; height: 57px; z-index: 8; margin-top: 1px; } div#menu li.back .left { height: 57px; border: 1px solid rgb(14,68,85); border-bottom: none; margin-right: 5px; background: rgb(24,88,115); } div#copyright { width: 80%; margin: 0 auto; font: 11px 'Trebuchet MS'; color: #ffffaa; text-indent: 30px; padding: 40px 0 0 0; } div#copyright a { color: #00bfff; } div#copyright a:hover { color: #ffffaa; } </style> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202215/jquery.js"></script> <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202215/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 class="subtext">home</span></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 class="subtext">product info</span></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 class="subtext">help</span></span></a></li> <li class="last"><a href="#"><span>Contacts</span></a></li> </ul> </div> <div id="copyright">Copyright © 2012 <a href="http://update8.com" target="_blank">Apycom jQuery Menus</a></div> </body> </html> (www.update8.com)提示：可修改后代码再运行!
