css+div做的菜单：一个主显示层，别的列表都隐藏着，用js函数设置列表的显示和隐藏。分别用到了两个函数，函数实现的效果是一样的，一个是参考的《css+Dhtml精髓》书上的事例，一个是找的函数。
第一个函数
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
function hiddenMenu(layerName)
{
// hidden the layer
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'");
}
//第一个函数
第二个函数
function MM_showHideLayers()
{
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+2];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible'
v='hide')?'hidden':v;
}
obj.visibility=v;
}
}
function MM_findObj(n, d)
{
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);
return x;
}
//第二个函数
<font color=red>
<!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>菜单</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
background: #fff;
font-size: 14px;
font-family: "宋体";
}
#nav{
border:#FF0099 solid 3px;
position:absolute;
top:30px;
left:50px;
width:150px;
height:300px;
}
#ul {
position:absolute;
top:30px;
list-style-type:none;
line-height:24px;
background-color:#fff;
width:149px;
text-align:center;
float: none;
}
#ul a:link{
text-decoration:none;
line-height:24px;
color:#666;
text-align:center;
text-decoration:none;
display:block;
width:150px;
}
#ul a:visited{
line-height:24px;
color:#666;
text-align:center;
text-decoration:none;
display:block;
width:150px;
/*直设这个宽度就行*/
/*设置宽度，IE浏览器。虽然设置了block，但是还只是文字为超链接，所以得显式设置宽度*/
}
#ul a:hover {
text-decoration:none;
color:#FF2a84;
}
/*#ul li{
display:inline;/*IE会让LI上下有空白，去掉空白
}*/
/*水果层*/
#shui {
position:absolute;
left: 200px;
top: 50px;
border: #66FFCC solid;
height:210px;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;/*不设背景色，层容易断裂 */
}
#shui a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/
}
#shui a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/
}
#shui a:hover {
text-decoration:none;
color:#0cc;
}
#hua {
position:absolute;
left: 200px;
top: 55px;
border: #C06 solid;
height:170px;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;
}
#hua a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#hua a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#hua a:hover {
text-decoration:none;
color:#C06;
}
#che {
position: absolute;
left: 200px;
top: 60px;
border: #6c3 solid;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;
}
#che a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#che a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#che a:hover {
text-decoration:none;
color:#6c3;
}
-->
</style>
<script language="javascript">//判断浏览器
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
}
//第一个函数
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
function hiddenMenu(layerName)
{
// hidden the layer
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'");
}
//第一个函数
//第二个函数
function MM_showHideLayers()
{
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+2];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v;
}
obj.visibility=v;
}
}
function MM_findObj(n, d)
{
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);
return x;
}
//第二个函数
</script>
</head>
<body>
<div id="nav">
<ul id="ul">
<!--调用第一个函数-->
<li><a href="#" onMouseOver="javascript:showMenu('shui')";
onMouseOut="javascript:hiddenMenu('shui')" >水果/水果</a> </li>
<!--调用第二个函数-->
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉/花卉</a></li>
<!--下面都是调用第二个函数-->
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";
onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')" >花卉/花卉/花卉2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";
onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果3</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉3</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车/汽车3</a></li>
</ul>
</div>
<ul id="shui" onMouseOver="javascript:showMenu('shui')";
onMouseOut="javascript:hiddenMenu('shui')" >
<li><a href="#" >苹果</a></li>
<li><a href="#" >香蕉</a></li>
<li><a href="#" >猕猴桃</a></li>
<li><a href="#" >火龙果</a></li>
<li><a href="#" >苹果2</a></li>
<li><a href="#" >香蕉2</a></li>
<li><a href="#" >猕猴桃2</a></li>
<li><a href="#" >火龙果2</a></li>
<li><a href="#" >猕猴桃3</a></li>
<li><a href="#" >火龙果3</a></li>
</ul>
<ul id="hua" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">
<li><a href="#" >菊花</a></li>
<li><a href="#" >玫瑰</a></li>
<li><a href="#" >牡丹</a></li>
<li><a href="#" >茉莉</a></li>
<li><a href="#" >君子兰</a></li>
<li><a href="#" >虞美人</a></li>
<li><a href="#" >喇叭花2</a></li>
<li><a href="#" >桂花2</a></li>
</ul>
<ul id="che" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">
<li><a href="#" >大众</a></li>
<li><a href="#" >奥迪</a></li>
<li><a href="#" >宝马</a></li>
<li><a href="#" >奔驰</a></li>
<li><a href="#" >保时捷</a></li>
<li><a href="#" >福特</a></li>
<li><a href="#" >克莱斯勒</a></li>
<li><a href="#" >法拉利</a></li>
<li><a href="#" >克莱斯勒2</a></li>
<li><a href="#" >法拉利2</a></li>
</ul>
</body>
</html>
</font>
第一个函数
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
function hiddenMenu(layerName)
{
// hidden the layer
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'");
}
//第一个函数
第二个函数
function MM_showHideLayers()
{
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+2];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible'
v='hide')?'hidden':v; }
obj.visibility=v;
}
}
function MM_findObj(n, d)
{
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);
return x;
}
//第二个函数
<font color=red>
<!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>菜单</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
background: #fff;
font-size: 14px;
font-family: "宋体";
}
#nav{
border:#FF0099 solid 3px;
position:absolute;
top:30px;
left:50px;
width:150px;
height:300px;
}
#ul {
position:absolute;
top:30px;
list-style-type:none;
line-height:24px;
background-color:#fff;
width:149px;
text-align:center;
float: none;
}
#ul a:link{
text-decoration:none;
line-height:24px;
color:#666;
text-align:center;
text-decoration:none;
display:block;
width:150px;
}
#ul a:visited{
line-height:24px;
color:#666;
text-align:center;
text-decoration:none;
display:block;
width:150px;
/*直设这个宽度就行*/
/*设置宽度，IE浏览器。虽然设置了block，但是还只是文字为超链接，所以得显式设置宽度*/
}
#ul a:hover {
text-decoration:none;
color:#FF2a84;
}
/*#ul li{
display:inline;/*IE会让LI上下有空白，去掉空白
}*/
/*水果层*/
#shui {
position:absolute;
left: 200px;
top: 50px;
border: #66FFCC solid;
height:210px;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;/*不设背景色，层容易断裂 */
}
#shui a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/
}
#shui a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/
}
#shui a:hover {
text-decoration:none;
color:#0cc;
}
#hua {
position:absolute;
left: 200px;
top: 55px;
border: #C06 solid;
height:170px;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;
}
#hua a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#hua a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#hua a:hover {
text-decoration:none;
color:#C06;
}
#che {
position: absolute;
left: 200px;
top: 60px;
border: #6c3 solid;
border-width: 2px 2px 2px 18px;
text-align:center;
list-style-type:none;
line-height: 20px;
visibility: hidden;
background-color:#fff;
}
#che a:link{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#che a:visited{
color: #666;
text-decoration: none;
display:block;
width:100px;
}
#che a:hover {
text-decoration:none;
color:#6c3;
}
-->
</style>
<script language="javascript">//判断浏览器
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
}
//第一个函数
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
function hiddenMenu(layerName)
{
// hidden the layer
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'");
}
//第一个函数
//第二个函数
function MM_showHideLayers()
{
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+2];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v;
}
obj.visibility=v;
}
}
function MM_findObj(n, d)
{
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);
return x;
}
//第二个函数
</script>
</head>
<body>
<div id="nav">
<ul id="ul">
<!--调用第一个函数-->
<li><a href="#" onMouseOver="javascript:showMenu('shui')";
onMouseOut="javascript:hiddenMenu('shui')" >水果/水果</a> </li>
<!--调用第二个函数-->
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉/花卉</a></li>
<!--下面都是调用第二个函数-->
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";
onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')" >花卉/花卉/花卉2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车2</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";
onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果3</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉3</a></li>
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车/汽车3</a></li>
</ul>
</div>
<ul id="shui" onMouseOver="javascript:showMenu('shui')";
onMouseOut="javascript:hiddenMenu('shui')" >
<li><a href="#" >苹果</a></li>
<li><a href="#" >香蕉</a></li>
<li><a href="#" >猕猴桃</a></li>
<li><a href="#" >火龙果</a></li>
<li><a href="#" >苹果2</a></li>
<li><a href="#" >香蕉2</a></li>
<li><a href="#" >猕猴桃2</a></li>
<li><a href="#" >火龙果2</a></li>
<li><a href="#" >猕猴桃3</a></li>
<li><a href="#" >火龙果3</a></li>
</ul>
<ul id="hua" onmouseover="javascript:MM_showHideLayers('hua','','show')";
onmouseout="javascript:MM_showHideLayers('hua','','hide')">
<li><a href="#" >菊花</a></li>
<li><a href="#" >玫瑰</a></li>
<li><a href="#" >牡丹</a></li>
<li><a href="#" >茉莉</a></li>
<li><a href="#" >君子兰</a></li>
<li><a href="#" >虞美人</a></li>
<li><a href="#" >喇叭花2</a></li>
<li><a href="#" >桂花2</a></li>
</ul>
<ul id="che" onmouseover="javascript:MM_showHideLayers('che','','show')";
onmouseout="javascript:MM_showHideLayers('che','','hide')">
<li><a href="#" >大众</a></li>
<li><a href="#" >奥迪</a></li>
<li><a href="#" >宝马</a></li>
<li><a href="#" >奔驰</a></li>
<li><a href="#" >保时捷</a></li>
<li><a href="#" >福特</a></li>
<li><a href="#" >克莱斯勒</a></li>
<li><a href="#" >法拉利</a></li>
<li><a href="#" >克莱斯勒2</a></li>
<li><a href="#" >法拉利2</a></li>
</ul>
</body>
</html>
</font>
