二级菜单
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PVII CSS Express Menu</title>
<style type="text/css">
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF; margin: 24px 0; padding: 8px;}
#menuwrapper { background-color: #EAEADD;/*菜单背景颜色*/}
.clearit {clear: both; height: 0; line-height: 0.0;font-size: 0;}
#p7menubar {width: 36em;}
#p7menubar, #p7menubar ul {padding: 0;margin: 0;list-style: none;}
/* 一级菜单 */
#p7menubar a { display: block; text-decoration: none; padding: 3px 8px 3px 8px;font-size: .85em; color: #000;}
#p7menubar a.trigger {padding: 3px 8px 3px 8px;background-position: right center;}
#p7menubar li {float: left;width: 9em;}
#p7menubar li {position: relative;}
/* hide from IE mac \*/
#p7menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#p7menubar li ul, #p7menubar ul li { width: 10em;}
/* 二级菜单 */
#p7menubar ul li a {border-right: 0;}
#p7menubar li ul {position: absolute; display: none; background-color: #FFFFFF;border: 1px solid #316AC5;/*弹出菜单边框颜色*/}
/* 当前菜单项 */
#p7menubar li div{border: 1px solid #EAEADD;}
#p7menubar li.p7hvr div{border: 1px solid #316AC5;margin-bottom:-1px;background-color: #C1D2EE;/*鼠标在上面时的颜色*/}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {display: block;}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {color: #000000;background-color: transparent;}
#p7menubar ul a:hover {background-color: #C1D2EE!important;/*弹出项鼠标在上面的颜色*/}
</style>
</head>
<body>
<div id="menuwrapper">
<ul id="p7menubar">
<li>
<div><a class="trigger" href="#">Trigger One</a></div>
<ul>
<li><a href="#">Sub 1.1</a></li>
<li><a href="#">Sub 1.2</a></li>
<li><a href="#">Sub 1.3</a></li>
<li><a href="#">Sub 1.4</a></li>
</ul>
</li>
<li>
<div><a class="trigger" href="#">Trigger Two</a></div>
<ul>
<li><a href="#">Sub 2.1 Sub 2.1</a></li>
<li><a href="#">Sub 2.2</a></li>
<li><a href="#">Sub 2.3</a></li>
<li><a href="#">Sub 2.4</a></li>
<li><a href="#">Sub 2.5</a></li>
</ul>
</li>
<li>
<div><a class="trigger" href="#">Trigger Three</a></div>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a></li>
<li><a href="#">Sub 3.3</a></li>
<li><a href="#">Sub 3.4</a></li>
<li><a href="#">Sub 3.5</a></li>
<li><a href="#">Sub 3.6</a></li>
<li><a href="#">Sub 3.7</a></li>
<li><a href="#">Sub 3.8</a></li>
</ul>
</li>
</ul>
<br class="clearit">
<script type="text/javascript" language="javascript">
P7_ExpMenu();
function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com
var k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='p7menubar';
g=document.getElementById(bv+nn);
if(g){
lg=g.getElementsByTagName("LI");
if(lg){
for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){
c=this.className;
cl=(c)?c+' '+cs:cs;
this.className=cl;
};
lg[k].onmouseout=function(){
c=this.className;
this.className=(c)?c.replace(r,''):'';
};
}
}
}
}
</script>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PVII CSS Express Menu</title>
<style type="text/css">
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF; margin: 24px 0; padding: 8px;}
#menuwrapper { background-color: #EAEADD;/*菜单背景颜色*/}
.clearit {clear: both; height: 0; line-height: 0.0;font-size: 0;}
#p7menubar {width: 36em;}
#p7menubar, #p7menubar ul {padding: 0;margin: 0;list-style: none;}
/* 一级菜单 */
#p7menubar a { display: block; text-decoration: none; padding: 3px 8px 3px 8px;font-size: .85em; color: #000;}
#p7menubar a.trigger {padding: 3px 8px 3px 8px;background-position: right center;}
#p7menubar li {float: left;width: 9em;}
#p7menubar li {position: relative;}
/* hide from IE mac \*/
#p7menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#p7menubar li ul, #p7menubar ul li { width: 10em;}
/* 二级菜单 */
#p7menubar ul li a {border-right: 0;}
#p7menubar li ul {position: absolute; display: none; background-color: #FFFFFF;border: 1px solid #316AC5;/*弹出菜单边框颜色*/}
/* 当前菜单项 */
#p7menubar li div{border: 1px solid #EAEADD;}
#p7menubar li.p7hvr div{border: 1px solid #316AC5;margin-bottom:-1px;background-color: #C1D2EE;/*鼠标在上面时的颜色*/}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {display: block;}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {color: #000000;background-color: transparent;}
#p7menubar ul a:hover {background-color: #C1D2EE!important;/*弹出项鼠标在上面的颜色*/}
</style>
</head>
<body>
<div id="menuwrapper">
<ul id="p7menubar">
<li>
<div><a class="trigger" href="#">Trigger One</a></div>
<ul>
<li><a href="#">Sub 1.1</a></li>
<li><a href="#">Sub 1.2</a></li>
<li><a href="#">Sub 1.3</a></li>
<li><a href="#">Sub 1.4</a></li>
</ul>
</li>
<li>
<div><a class="trigger" href="#">Trigger Two</a></div>
<ul>
<li><a href="#">Sub 2.1 Sub 2.1</a></li>
<li><a href="#">Sub 2.2</a></li>
<li><a href="#">Sub 2.3</a></li>
<li><a href="#">Sub 2.4</a></li>
<li><a href="#">Sub 2.5</a></li>
</ul>
</li>
<li>
<div><a class="trigger" href="#">Trigger Three</a></div>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a></li>
<li><a href="#">Sub 3.3</a></li>
<li><a href="#">Sub 3.4</a></li>
<li><a href="#">Sub 3.5</a></li>
<li><a href="#">Sub 3.6</a></li>
<li><a href="#">Sub 3.7</a></li>
<li><a href="#">Sub 3.8</a></li>
</ul>
</li>
</ul>
<br class="clearit">
<script type="text/javascript" language="javascript">
P7_ExpMenu();
function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com
var k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='p7menubar';
g=document.getElementById(bv+nn);
if(g){
lg=g.getElementsByTagName("LI");
if(lg){
for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){
c=this.className;
cl=(c)?c+' '+cs:cs;
this.className=cl;
};
lg[k].onmouseout=function(){
c=this.className;
this.className=(c)?c.replace(r,''):'';
};
}
}
}
}
</script>
</div>
</body>
</html>
