<!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=gb2312" />
<title>横二级润滑 竖二级折叠菜单
01</title>
<style type="text/css">
<!--
body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0;
list-style:none;}
body { font:12px "Arial","宋体";color:#333;background:#FFF;}
a{border:none; text-decoration:none;}
#menu { width:980px; margin:30px auto;}
#menu dl {
padding-left:10px; height:29px;overflow:hidden;}
#menu dl dd
{ float:left; padding-right:5px;}
#menu dl dd
a {display:block; padding-left:10px;
background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat 0
-61px;}
#menu dl dd
a span {
display:block;
color:#630;
width:50px;
height:30px;
text-align:center;
line-height:34px;
font-size:14px;
padding-right:10px;
background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat right
-61px;
overflow:hidden;
}
#menu dl dd
a:hover,
#menu dl
dd.ok a {background-position: 0 -91px;}
#menu dl dd
a:hover span,
#menu dl
dd.ok a span { cursor:pointer; font-weight:bold;
color:#FFF;background-position: right -91px;}
#menu ol
{clear:both; height:30px;
background:url("../91/da/c2/3194480/0/menu.jpg") repeat-x 0
0;}
#menu ol li
{ float:left;}
#menu ol li
a { color:#FFF; display:block; width:70px; text-align:center;
height:30px; line-height:32px; overflow:hidden;}
#menu ol li
a:hover,
#menu ol
li.ok a,
#menu ol
li.ol a{ font-weight:bold;
background:url("../91/da/c2/3194480/0/menu.jpg") no-repeat 0
-30px;}
#menu ol li
span {
width:150px;position:absolute;background-color:#FEFEFE;}
#menu ol li
span h1 {font:12px "宋体"; float:none; display:block;
background-color:#E6E6E6;}
#menu ol li
span h1 a,
#menu ol
li.ok span h1 a,
#menu ol
li.ok span ul a{
color:#333;
width:148px;
text-indent:10px;
height:24px;
line-height:26px;
text-align:left;
font-weight:normal;
border-top:#FFF 1px solid;
border-bottom:#A0A0A0 1px solid;
border-right:#A0A0A0 1px solid;
background-image:none;
}
#menu ol li
span h1 a:hover,
#menu ol li
span h1.ok a {color:#930; font-weight:bold; background-image:none;
background-color:#D9D9D9;}
#menu ol
li.ok span ul {width:147px; border:#E6E6E6 1px solid;
border-top:none;overflow:hidden;}
#menu ol
li.ok span ul a {border:none;}
#menu ol
li.ok span ul a:hover { color:#930; font-weight:bold;
text-indent:15px; background-image:none;}
.no,.ol span { display:none;}
-->
</style>
<script language="javascript">
<!--//
function ShowMenu(obj,n){
var dd =
obj.parentNode.getElementsByTagName_r("dd");
for(var
i=0;i<dd.length;i++){dd[i].className = "";}
dd[n].className = "ok";
var ol =
document.getElementByIdx("menu").getElementsByTagName_r("ol");
for(var
i=0;i<ol.length;i++){ol[i].className = "no";}
ol[n].className = "";
}
function ShowSpan(obj,n){
var span =
obj.parentNode.getElementsByTagName_r("span");
for(var
i=0;i<span.length;i++){span[i].className =
"no";}
span[n].className = "";
var li =
obj.parentNode.getElementsByTagName_r("li")
li[n].className = "ok";
for(var
i=0;i<li.length;i++){ 
加载中…