演示
http://www.chinahtml.com/lib/menu/
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>