<style> * { margin:0px; padding:0px;} .aa { top: 120px; left: 120px; height: 40px; width: 80px; position: absolute; overflow: hidden; line-height: 40px; text-align: center; background-color: #333; } .aaa { top:120px; left:120px; height:40px; width:80px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#F00; } .b { height:40px; width:80px; top:40px; left:0px; position:absolute; overflow:hidden; background-color:#666; } .bb { height:40px; width:80px; top:40px; left:0px; position:absolute; overflow:visible; background-color:#FF6; } .c { height:40px; width:80px; top:80px; left:0px; position:absolute; overflow:hidden; background-color:#999; } .cc { height:40px; width:80px; top:80px; left:0px; position:absolute; overflow:visible; background-color:#FF9; } .d { height:40px; width:80px; top:120px; left:0px; position:absolute; overflow:hidden; background-color:#CCC; } .dd { height:40px; width:80px; top:120px; left:0px; position:absolute; overflow:visible; background-color:#FFC; } .e { height:110px; width:90px; top:0px; left:80px; position:absolute; background-color:#C3C; } </style> </head> <body> <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'"><font color="#FFFFFF">新闻动态</font> <div class="b" onmouseover="this.className='bb'" onmouseout="this.className='b'">场景<div class="e"></div></div> <div class="c" onmouseover="this.className='cc'" onmouseout="this.className='c'">活动<div class="e"></div></div> <div class="d" onmouseover="this.className='dd'" onmouseout="this.className='d'">杂谈<div class="e"></div></div> </div> </body>