案例：HTML DOM案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html>
2
<head>
3
<style>
4
body{font-family:arial;}
5
table{font-size:80%;background:black}
6
a{color:black;text-decoration:none;font:bold}
7
a:hover{color:#606060}
8
td.menu{background:lightblue}
9
table.menu
10
{
11
font-size:100%;
12
position:absolute;
13
visibility:hidden;
14
}
15
</style>
16
<script type="text/javascript">
17
function showmenu(elmnt)
18
{
19
document.getElementById(elmnt).style.visibility="visible"
20
}
21
function hidemenu(elmnt)
22
{
23
document.getElementById(elmnt).style.visibility="hidden"
24
}
25
</script>
26
</head>
27
​
28
<body>
29
<h3>下拉菜单</h3>
30
<table width="100%">
31
 <tr bgcolor="#FF8080">
32
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
33
   <a href="/html/">html教程</a><br />
34
   <table class="menu" id="tutorials" width="120">
35
   <tr><td class="menu"><a href="/html/oldhtml/">HTML</a></td></tr>
36
   <tr><td class="menu"><a href="/html/html5/">HTML5</a></td></tr>
37
   <tr><td class="menu"><a href="/html/oldcss/">CSS</a></td></tr>
38
   </table>
39
  </td>
40
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
41
   <a href="/jsjq/">脚本</a><br />
42
   <table class="menu" id="scripting" width="120">
43
   <tr><td class="menu"><a href="/jsjq/javascript/">JavaScript</a></td></tr>
44
   <tr><td class="menu"><a href="/jsjq/htmldom/">HTML DOM</a></td></tr>
45
   <tr><td class="menu"><a href="/jsjq/jquery/">jQuery</a></td></tr>
46
   </table>
47
  </td>
48
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">