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>
效果为：
