通过HTML、CSS、JSP来实现
1、首先确定通过div嵌套来实现：
大的div里放默认显示的一层，限制其总层次高，设置超出部分隐藏
小的div里放鼠标移过去时显示的一层：3行1列的表格
2.通过CSS来设置div和table的样式
3.通过JSP来设置方法：onmouseover时显示全部内容
onmouseout时只显示大的一层
4.通过id来调用样式，通过事件来调用方法
<!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 type="text/css"> 放在head里 * { margin:0px; padding:0px;} #aa { height: 40px; width: 90px; top: 50px; left: 200px; background-color:#CCC; position: absolute; overflow: hidden; text-align: center; line-height: 40px; } #bb { height:120px; width:90px; top:40px; left:0px; background-color:#CCC; position:absolute; } table { border:0px solid #CCC; height:120px; width:90px; text-align:center; vertical-align:middle; } </style> </head> <body> <div id="aa" onmouseover="over()" onmouseout="out()">新闻动态 <div id="bb"> <table cellpadding="0" cellspacing="0"> <tr><td>场景</td></tr> <tr><td>活动</td></tr> <tr><td>杂谈</td></tr> </table> </div></div> </body> </html> <script> function over() { var a=document.getElementById("aa"); a.setAttribute("style","overflow:visible;backgroundcolor:#3FC"); } function out() { var a=document.getElementById("aa"); a.setAttribute("style", "overflow:hidden;backgroundcolor:#CCC"); } </script>
默认时：
鼠标在上面时：
鼠标移开时
原文：http://www.cnblogs.com/Chenshuai7/p/5079375.html