<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>二级菜单</title>
<style type="text/css">
#tabMenu
{
width:150px;
}
#tabMenu a
{
width:150px;
display:block;
height:30px;
line-height:30px;
text-align:center;
background-color:#CCC;
color:black;
text-decoration:none;
border:solid 1px;
}
#tabMenu a:hover
{
color:#FFF;
background-color:red;
}
#tabMenu div
{
position:absolute;
z-index:10;/*把后面的层隐藏了*/
display:none;
}
</style>
<script type="text/javascript">
function showmenu(num)
{
document.getElementById("menu"+num).style.display="block";
}
function hidemenu()
{
document.getElementById("menu"+num).style.display="none";
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="tabMenu">
<tr>
<td><a href="" onMouseOver="showmenu(1)"
onMouseOut="hidemenu(1)">编程语言</a></td>
<td><a href="" onMouseOver="showmenu(2)"
onMouseOut="hidemenu(2)">WEB开发</a></td>
<td><a href="" onMouseOver="showmenu(3)"
onMouseOut="hidemenu(3)">产品中心</a></td>
</tr>
<tr>
<td>
<div id="menu1">
<a href="">JAVA详解</a>
<a href="">C++详解</a>
<a href="">C语言详解</a>
</div>
</td>
<td>
<div id="menu2">
<a href="">Javascript</a>
<a href="">Html</a>
<a href="">Css+DIV</a>
</div>
</td>
<td>
<div id="menu3">
<a href="">网络管理软件</a>
<a href="">系统优化大师</a>
<a href="">音乐播放器</a>
</div>
</td>
</tr>
</table>
</body>
</html>