一个简单的下拉菜单,主要说明CSS中posistion的作用。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>浮动窗体</title> <mce:style type="text/css"><!-- .submenu { background: #ff3398; position: absolute; display: none; } .siteactive { color: red; } --></mce:style><style type="text/css" mce_bogus="1">.submenu { background: #ff3398; position: absolute; display: none; } .siteactive { color: red; }</style> <mce:script type="text/javascript"><!-- function show(obj){ var fs = $(obj.id+"_"); fs.style.display="block"; } function ac(obj){ obj.className = "siteactive"; } function iac(obj){ obj.className = ""; } //利用Timer更好的定时 function hideNav(obj){ var emt = $(obj.id+"0_"); emt.style.display = "none"; } function menu(){ } function $(l){ return document.getElementById(l); } // --></mce:script> </head> <body bgcolor="silver"> <!-- cellpadding内容和边框的距离,cellspacing边框之间的距离 --> <table cellpadding="0" cellspacing="0"> <tr> <td id="cinfo" align="center" οnmοuseοut="hideNav(this);"> <div οnmοuseοver="show(this);" style="background: blue; width: 80px;" id="cinfo0">公司信息</div> <div class="submenu" id="cinfo0_"> <a>公司动态</a><br> <a>管理团队</a><br> <a>合作单位</a><br> <a>发展单位</a> </div> </td> <td align="center" οnmοuseοut="hideNav(this);" id="solve"> <div οnmοuseοver="show(this);" style="background: blue; width: 80px;" id="solve0">解决方案</div> <div class="submenu" id="solve0_"> <a>电力行业</a><br> <a>IT行业</a><br> <a>医疗机构</a><br/> <a>制造业</a> </div> </td> </tr> </table> </body> </html> 这些内容完全可以用JS实现。