新闻中心 产品中心 产品展示
1新闻 2新闻 1产品 2产品 1展示 2展示 3展示光标移动到新闻中心就会显示，1新闻 2新闻
光标移动到产品中心就会显示，1产品 2产品
光标移动到产品展示就会显示，1展示 2展示 3展示
这个菜单要怎么做？
急用
1新闻 2新闻 1产品 2产品 1展示 2展示 3展示光标移动到新闻中心就会显示，1新闻 2新闻
光标移动到产品中心就会显示，1产品 2产品
光标移动到产品展示就会显示，1展示 2展示 3展示
这个菜单要怎么做？
急用
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>通用的二级菜单</title>
<style type="text/css">
#menu
{
width:300px;
margin:auto;
}
#div1
{
display:none;
font-size:12px;
position:relative;
left:0px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div2
{
display:none;
font-size:12px;
position:relative;
left:50px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div3
{
display:none;
font-size:12px;
position:relative;
left:120px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div4
{
display:none;
font-size:12px;
position:relative;
left:200px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
</style>
<script language="javascript" type="text/javascript">
//显示层
function showDiv(divName)
{
document.getElementById(divName).style.display = "block";
}
//隐藏层
function hiddenDiv(divName)
{
document.getElementById(divName).style.display = "none";
}
</script>
</head>
<body>
<div id="menu">
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">新闻中心 </a>
|
<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">产品中心 </a>
|
<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">产品展示</a>
<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">1新闻</a>
<a href="#">2新闻</a>
</div>
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">1产品</a>
<a href="#">2产品</a>
</div>
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">1展示 </a>
<a href="#">2展示 </a>
<a href="#">3展示 </a>
</div>
</div>
</body>
</html>