1 <head> 2 <script language="javascript" type="text/javascript" src="../../../教学/HTML部分/0327/jquery-1.4.2.min.js"></script> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <style> 6 * 7 { 8 margin:0px; 9 padding:0px;} 10 .a 11 { 12 height:60px; 13 width:120px; 14 font-size:24px; 15 text-align:center; 16 line-height:60px; 17 background-color:#0FF; 18 overflow:hidden; 19 top:200px; 20 left:500px; 21 position:fixed;} 22 .aa 23 { 24 height:60px; 25 width:120px; 26 font-size:24px; 27 color:#000; 28 text-align:center; 29 line-height:60px; 30 overflow:hidden; 31 position:relative; 32 } 33 .aaa 34 { 35 top:-60px; 36 left:120px; 37 position:relative;} 38 .aaa1 39 { 40 top:-60px; 41 left:-360px; 42 position:relative;} 43 /*#menu 44 { 45 display:none;}*/ 46 </style> 47 </head> 48 49 <body> 50 <!--<nav id="menu">--> 51 <div class="a" id="b" onmouseover="over()" onmouseout="out()">订餐 52 <div class="aa" id="b1" onmouseover="over1()" onmouseout="out1()" style="background-color:#0F0" >西餐 53 <div class="aaa"> 54 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" > 55 <tr> 56 <td bgcolor="#30F0C0">肯德基</td> 57 <td bgcolor="#30F0C0">麦当劳</td> 58 <td bgcolor="#30F0C0">披萨</td> 59 </tr></table></div> 60 </div> 61 <div class="aa" id="b2" onmouseover="over2()" onmouseout="out2()" style="background-color:#CF0">中餐 62 <div class="aaa1"> 63 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" > 64 <tr> 65 <td bgcolor="#C0F0C0">面条</td> 66 <td bgcolor="#C0F0C0">水饺</td> 67 <td bgcolor="#C0F0C0">米饭</td> 68 </tr></table></div></div> 69 <div class="aa" id="b3" onmouseover="over3()" onmouseout="out3()" style="background-color:#C00">零食 70 <div class="aaa"> 71 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" > 72 <tr> 73 <td bgcolor="#F000C0">薯片</td> 74 <td bgcolor="#F000C0">虾条</td> 75 <td bgcolor="#F000C0">方便面</td> 76 </tr></table></div></div> 77 </div> 78 <!--</nav>--> 79 <br /> 80 <br /> 81 <br /> 82 <br /> 83 <br /> 84 <br /> 85 <br /> 86 <br /> 87 <br /> 88 <br /> 89 <br /> 90 <br /> 91 <br /> 92 <br /> 93 <br /> 94 <br /> 95 <br /> 96 <br /> 97 <br /> 98 <br /> 99 <br /> 100 <br /> 101 <br /> 102 <br /> 103 <br /> 104 <br /> 105 <br /> 106 <br /> 107 <br /> 108 <br /> 109 <br /> 110 <br /> 111 <br /> 112 <br /> 113 <br /> 114 <br /> 115 <br /> 116 <br /> 117 <br /> 118 <br /> 119 <br /> 120 <br /> 121 <br /> 122 <br /> 123 <br /> 124 <br /> 125 <br /> 126 <br /> 127 <br /> 128 129 </body> 130 </html> 131 <script> 132 /*function menuvisible () 133 { 134 $("nav").slideToggle(1000);}*/ 135 function over () 136 { 137 var a1=document.getElementById("b"); 138 a1.setAttribute("style","overflow:visible;background-color:#00C;")} 139 function out () 140 { 141 var a2=document.getElementById("b"); 142 a2.setAttribute("style","overflow:hidden;background-color:#0FF;")} 143 function over1 () 144 { 145 var a3=document.getElementById("b1"); 146 a3.setAttribute("style","overflow:visible;background-color:#30F0C0;")} 147 function out1 () 148 { 149 var a4=document.getElementById("b1"); 150 a4.setAttribute("style","overflow:hidden;background-color:#0F0;")} 151 function over2 () 152 { 153 var a5=document.getElementById("b2"); 154 a5.setAttribute("style","overflow:visible;background-color:#C0F0C0;")} 155 function out2 () 156 { 157 var a6=document.getElementById("b2"); 158 a6.setAttribute("style","overflow:hidden;background-color:#CF0;")} 159 function over3 () 160 { 161 var a7=document.getElementById("b3"); 162 a7.setAttribute("style","overflow:visible;background-color:#F000C0;")} 163 function out3 () 164 { 165 var a8=document.getElementById("b3"); 166 a8.setAttribute("style","overflow:hidden;background-color:#C00;")} 167 </script>