1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 *{
  8     margin:0px;
  9     padding:0px;
 10 }
 11 .aa{
 12     height:40px;
 13     width:80px;
 14     top:100px;
 15     left:100px;
 16     position:absolute;
 17     overflow:hidden;
 18     line-height:40px;
 19     text-align:center;
 20     background-color:#33C;
 21 }
 22 .aaa{
 23     height:40px;
 24     width:80px;
 25     top:100px;
 26     left:100px;
 27     position:absolute;
 28     overflow:visible;
 29     line-height:40px;
 30     text-align:center;
 31     background-color:#F00;
 32 }
 33 #bb{
 34     height:120px;
 35     width:80px;
 36     top:40px;
 37     left:0px;
 38 }
 39 #table1{
 40     height:120px;
 41     width:80px;
 42     border:0px;
 43     text-align:center;
 44     vertical-align:middle;
 45 }
 46 #table2{
 47     height:160px;
 48     width:80px;
 49     border:0px;
 50     text-align:center;
 51     vertical-align:middle;
 52 }
 53 .cc{
 54     height:40px;
 55     width:80px;
 56     overflow:hidden;
 57     line-height:40px;
 58     text-align:center;
 59     background-color:#6C6;
 60 }
 61 .ccc{
 62     height:40px;
 63     width:80px;
 64     overflow:visible;
 65     line-height:40px;
 66     text-align:center;
 67     background-color:#90F;
 68 }
 69 #dd{    
 70     top:-40px;
 71     left:80px;
 72     position:relative;
 73 }
 74 
 75 </style>
 76 </head>
 77 
 78 <body>
 79 <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">新闻动态
 80 <div id="bb"><table cellpadding="0" cellspacing="0" id="table1">
 81 <tr>
 82 <td><div class="cc" onmouseover="this.className='ccc'" onmouseout="this.className='cc'">水果
 83 <div id="dd">
 84 <table cellpadding="0" cellspacing="0" id="table2">
 85 <tr><td bgcolor="#333399">苹果</td></tr>
 86 <tr><td bgcolor="#CCCC00">香蕉</td></tr>
 87 <tr><td bgcolor="#FFFF66">橘子</td></tr>
 88 <tr><td bgcolor="#CC99CC">橙子</td></tr>
 89 </table>
 90 </div></div>
 91 </td>
 92 </tr>
 93 
 94 <tr bgcolor="#99CC00"><td>场景</td></tr>
 95 <tr bgcolor="#FF99CC"><td>活动</td></tr>
 96 <tr bgcolor="#0000FF"><td>杂谈</td></tr></table>
 97 </div></div>
 98 
 99 </body>
100 </html>

效果为：