一个下拉式二级菜单
HTML 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- 作者：laogui | www.laogui.com 联系：laogui@gmail.com 本页内容无任何版权，你可以任意修改，在任何地方使用 Last modified: August 31, 2006 05:48 PM by laogui --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>无限下拉二级菜单</title> <style type="text/css"> /* 菜单开始 --------------------------------------------------------------------- */ .main-aii { width: 131px; float: left; color: #444; font-size: 12px; } .main-aii ul.drop-down, .main-aii ul.drop-down ul { padding: 0; /* all lists */ margin: 0; list-style: none; font-size: 12px; } .main-aii ul.drop-down a { display: block; } .main-aii ul.drop-down li.select { border: 1px solid #999; float: left; width: 114px; padding: 0; margin: 5px 8px; background: #fff url(aii_select_bg.gif) no-repeat 93px 1px; /* all list items */ color: #555; } * html .main-aii ul.drop-down li.select { margin: 5px 3px 5px 4px; /* for IE */ } .main-aii ul.drop-down li.select a { padding: 4px 8px; margin: 0; border: 0; color: #555; font-weight: normal; text-decoration: none; } .main-aii ul.drop-down li.select a:hover { color: #fff; background: #6DB43E; } .main-aii ul.drop-down li.select a.drop:hover { color: #fff; background: #6DB43E url(aii_select_bg.gif) no-repeat 93px 2px; } .main-aii ul.drop-down li.select ul, .main-aii ul.drop-down li.select ul li.subhead ul { width: 200px; border: 1px solid #999; background: #f5f5f5; color: #444; font-family: verdana, arial, sans-serif; position: absolute; /* second-level lists */ left: -5000px; } .main-aii ul.drop-down li.select ul li, .main-aii ul.drop-down li.select ul li.subhead ul li { border-top: 1px dashed #999; padding: 0; margin: 0; display: block; background: #f5f5f5; } .main-aii ul.drop-down li.select ul li.lead, .main-aii ul.drop-down li.select ul li ul li.lead { border: 0; } .main-aii ul.drop-down li.select ul li.subhead { background: url(subservice_icon.gif) no-repeat top right; } * html .main-aii ul.drop-down li.select ul li.subhead { margin-bottom: -14px; /* for IE */ } .main-aii ul.drop-down li.select ul li a, .main-aii ul.drop-down li.select ul li.subhead ul li a { width: 190px; padding: 5px; margin: 0; color: #444; text-decoration: none; } .main-aii ul.drop-down li.select ul li a:hover, .main-aii ul.drop-down li.select ul li.subhead ul li a:hover { color: #fff; background: #6DB43E;/* 无下级菜单的鼠标悬停背景色*/ font-weight: normal; text-decoration: none; } .main-aii ul.drop-down li.select:hover ul, .main-aii ul.drop-down li.sfhover ul { margin: 0 0 0 -1px; left: auto; /* lists nested under hovered list items */ } .main-aii ul.drop-down li.select ul li.subhead:hover ul, .main-aii ul.drop-down li.select ul li.sfhover ul { margin: -26px 0 0 200px !important; margin: -27px 0 0 200px; left: auto; /* lists nested under hovered list items */ } .main-aii ul.drop-down li.select ul li.subhead a.subdrop:hover { color: #fff; background: #6DB43E url(subservice_icon_on.gif) no-repeat top right; } /* 菜单结束 --------------------------------------------------------------------- */ </style> <script type="text/javascript"> <!-- // Homepage Select Box Function sfHover = function() { var sfEls = document.getElementById("content-main").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (document.all&&document.getElementById) window.onload=sfHover; //--> </script> </head> <body> <div id="content-main"> <div id="aii-add" class="main-aii"> <ul class="drop-down"> <li class="select"><a href="" class="drop">选择菜单</a> <ul> <li class="subhead lead" style="padding:0;"><a href="#nogo" class="subdrop">主菜单1</a> <ul> <li class="lead"><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> </ul> </li> <li class="subhead" style="padding:0;"><a href="#nogo" class="subdrop">主菜单2</a> <ul> <li class="lead"><a href="">菜单21</a></li> <li><a href="">菜单22</a></li> <li><a href="">菜单23</a></li> <li><a href="">菜单24</a></li> </ul> </li> <li><a href="">主菜单3</a></li> <li><a href="">主菜单4</a></li> <li class="subhead" style="padding:0;"><a href="#nogo" class="subdrop">主菜单5</a> <ul> <li class="lead"><a href="">菜单51</a></li> <li><a href="">菜单52</a></li> <li><a href="">菜单53</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>
平板模式
