1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>无标题文档</title>
4 <style type="text/css">
5 *{margin:0px auto;padding:0px;}
6 #menu{width:800px;height:40px;margin-top:100px;}
7 .list{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;float:left;border:1px solid #333;}
8 .erji{width:0px;height:0px;float:left;}
9 .erwai{width:100px;height:122px;border:1px solid
10 #333;position:relative;top:41px;left:-102px; display:none;}
11 .item{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;border-bottom:1px solid #333;}
12 </style>
13
14 </head>
15
16 <body>
17 <div id="menu">
18 <div class="list" onmouseover="show('chanpin')" onmouseout="hide('chanpin')">产品</div>
19 <div class="erji">
20 <div class="erwai" id="chanpin" onmouseover="xianshi('chanpin')" onmouseout="xiaoshi('chanpin')">
21 <div class="item">食品</div>
22 <div class="item">家电</div>
23 <div class="item">手机</div>
24 </div>
25 </div>
26 <div class="list" onmouseover="show('xinwen')" onmouseout="hide('xinwen')">新闻</div>
27 <div class="erji">
28 <div class="erwai" id="xinwen" onmouseover="xianshi('xinwen')" onmouseout="xiaoshi('xinwen')">
29 <div class="item">美食</div>
30 <div class="item">旅游</div>
31 <div class="item">家庭</div>
32 </div>
33 </div>
34 <div class="list" onmouseover="show('lianxi')" onmouseout="hide('lianxi')">联系</div>
35 <div class="erji">
36 <div class="erwai" id="lianxi" onmouseover="xianshi('lianxi')" onmouseout="xiaoshi('lianxi')">
37 <div class="item">电话</div>
38 <div class="item">网址</div>
39 <div class="item">地址</div>
40 </div>
41 </div>
42 </div>
43 </body>
44 <script type="text/javascript">
45 function show(id){
46 var a=document.getElementById(id);
47 a.style.display="block";
48 }
49 function hide(id){
50 var a=document.getElementById(id);
51 a.style.display="none";
52 }
53 function xianshi(id){
54 var a=document.getElementById(id);
55 a.style.display="block";
56 }
57 function xiaoshi(id){
58 var a=document.getElementById(id);
59 a.style.display="none";
60 }
61 </script>
62 </html>
