<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>隐藏导航练习</title> <style> *{ margin:0px; padding:0px; } .aa{ height:40px; width:80px; top:100px; left:100px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#0FF; } .aaa{ height:40px; width:80px; top:100px; left:100px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:red; } #bb{ height:120px; width:80px; top:40px; left:0px; } #table1{ height:120px; width:80px; border:0px; text-align:center; vertical-align:middle; } #table2{ height:160px; width:80px; border:0px; text-align:center; vertical-align:middle;} .cc{ height:40px; width:80px; overflow:hidden; line-height:40px; text-align:center; background-color:#CFC; } .ccc{ height:40px; width:80px; overflow:visible; line-height:40px; text-align:center; background-color:#0FC; } #dd{ top:-40px; left:80px; position:relative; } #table2a{ height:160px; width:80px; border:0px; text-align:center; vertical-align:middle;} .cca{ height:40px; width:80px; overflow:hidden; line-height:40px; text-align:center; background-color:#933; } .ccca{ height:40px; width:80px; overflow:visible; line-height:40px; text-align:center; background-color:#F0F; } #dda{ top:0px; left:80px; position:relative; } #table2b{ height:160px; width:80px; border:0px; text-align:center; vertical-align:middle;} .ccb{ height:40px; width:80px; overflow:hidden; line-height:40px; text-align:center; background-color:#90C; } .cccb{ height:40px; width:80px; overflow:visible; line-height:40px; text-align:center; background-color:#CF0; } #ddb{ top:0px; left:0px; position:relative; } </style> </head> <body> <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">新闻动态 <div id="bb" > <table cellpadding="0" cellspacing="0" id="table1"> <tr bgcolor="#99CC00"> <td> <div class="cc" onmouseover="this.className='ccc'" onmouseout="this.className='cc'">水果 <div id="dd"> <table cellpadding="0" cellspacing="0" id="table2"> <tr><td bgcolor="#009900">香蕉</td></tr> <tr><td bgcolor="#FF0000">苹果</td></tr> <tr><td bgcolor="#FFFF00">草莓</td></tr> <tr><td bgcolor="#33FF00">西瓜</td></tr> </table> </div> </div> </td> </tr> <tr bgcolor="#FF99CC"> <td><div class="cca" onmouseover="this.className='ccca'" onmouseout="this.className='cca'">活动 <div id="dda"> <table cellpadding="0" cellspacing="0" id="table2a"> <tr><td bgcolor="#009900">打篮球</td></tr> <tr><td bgcolor="#FF0000">打乒乓球</td></tr> <tr><td bgcolor="#FFFF00">打猎</td></tr> <tr><td bgcolor="#33FF00">旅游</td></tr> </table> </div> </div> </td> </tr> <tr bgcolor="#0000FF"> <td> <div class="ccb" onmouseover="this.className='cccb'" onmouseout="this.className='ccb'">杂谈 <div id="ddb"> <table cellpadding="0" cellspacing="0" id="table2b"> <tr><td bgcolor="#009900">小说类</td></tr> <tr><td bgcolor="#FF0000">散文类</td></tr> <tr><td bgcolor="#FFFF00">古诗文类</td></tr> <tr><td bgcolor="#33FF00">八卦类</td></tr> </table> </div> </div></td></tr> </table> </div></div> <p>打开位置的不同主要是因为dd的相对位置的坐标值不一样，当为垂直向下时，可以省去relative</p> </body> </html>