<!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" > *{margin:0px ;padding:0px;} .yiji{100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; float:left;} .yiji:hover{ background-color:#F09; color:#FFF;;} </style> </head> <body> <div style="500px; height:36px; border:1px solid #60F; margin:0px auto;"> <div class="yiji" onmouseover="xianshi('erji1')" onmouseout="yincang('erji1')" >首页</div> <div id="erji1" style=" float:left; 0px; display:none;"> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">首页1</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">首页2</div> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">首页3</div> </div> <div class="yiji" onmouseover="xianshi('erji2')" onmouseout="yincang('erji2')">产品中心</div> <div id="erji2" style=" float:left; 0px; display:none;"> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心1</div> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心2</div> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">产品中心3</div> </div> <div class="yiji" onmouseover="xianshi('erji3')" onmouseout="yincang('erji3')">活动中心</div> <div id="erji3" style=" float:left; 0px; display:none;"> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">活动中心1</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">活动中心2</div> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px;background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">活动中心3</div> </div> <div class="yiji" onmouseover="xianshi('erji4')" onmouseout="yincang('erji4')">联系我们</div> <div id="erji4" style=" float:left; 0px; display:none;"> <div style="100px; height:36px; position:relative; top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">联系我们1</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">联系我们2</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px;background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">联系我们3</div> </div> <div class="yiji" onmouseover="xianshi('erji5')" onmouseout="yincang('erji5')">邮箱</div> <div id="erji5" style=" float:left; 0px; display:none;" > <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">邮箱1</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C; text-align:center; line-height:36px; vertical-align:middle;">邮箱2</div> <div style="100px; height:36px; position:relative;top:38px; left:-100.5px; background-color:#06C;text-align:center; line-height:36px; vertical-align:middle;">邮箱3</div> </div> </div> </body> <script type="text/javascript"> function xianshi(d) { var erji=document.getElementById(d); erji.style.display="block"; } function yincang(d) { var erji=document.getElementById(d); erji.style.display="none"; } </script> </html>
鼠标放上会拉伸，鼠标拿走会收起来