代码示例:(标识:dhtm_menu2)
<html>
<head>
<style>
table
{
font-size:12;
background-color:#c0c0c0;
}
span
{
border:groove 2px;
padding:3;
font-family:arial;
font-size:12;
width:90;
height:40;
background-color:#c0c0c0;
position:relative;
top:-15;
left:-80;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
elmnt.style.left="-10"
}

function hidemenu(elmnt)
{
elmnt.style.left="-80"
}
</script>
</head>
<body>

<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<table border="0" width="100%">
<tr>
<td width="90%"><a href="/index.php">HOME</a></td>
<td rowspan="2">A</td>
</tr><tr>
<td><a href="/javascript/index.html">JavaScript</a></td>
</tr>
</table>
</span>

<br />

<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<table width="100%">
<tr>
<td width="90%"><a href="http://www.microsoft.com">Explorer</a></td>
<td rowspan="2">B</td>
</tr><tr>
<td><a href="http://my.netscape.com">Navigator</a></td>
</tr>
</table>
</span>

<br />

<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<table width="100%">
<tr>
<td width="90%"><a href="http://www.altavista.com">AltaVista</a></td>
<td rowspan="2">C</td>
</tr><tr>
<td><a href="http://www.yahoo.com">Yahoo!</a></td>
</tr>
</table>
</span>

</body>
</html>
运行结果: