今天主要是做的隐藏导航有横向延伸和纵向延伸两种
横向的
<title>隐藏</title> <style> *{ margin:0px; padding:0px;} .aa { height:40px; width:80px; left:300px; top:100px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#0FF} .aaa { height:40px; width:80px; left:300px; top:100px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#399} /*#b1 { height:120px; 80px; top:40px; left:0px;}*/ table { height:120px; width:80px; border:0px; text-align:center; vertical-align:middle; } .ee { height:40px; width:80px; top:40px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#699;} .eee { height:40px; width:80px; top:40px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#9F0;} .pp { top:0px; left:80px; position:absolute;} .dd { height:40px; width:80px; top:80px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#C09;} .ddd { height:40px; width:80px; top:80px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#FCC;} .ff { height:40px; width:80px; top:120px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#309;} .fff { height:40px; width:80px; top:120px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#F30;} table { height:40px; width:240px; border:0px; text-align:center; vertical-align:middle;} </style> </head> <body> <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">餐厅 <div class="ee" onmouseover="this.className='eee'" onmouseout="this.className='ee'">主食<div class="pp"> <table cellpadding="0" cellspacing="0" style="background-color:#9F0"> <tr> <td >馒头</td> <td >米饭</td> <td >汉堡</td> </tr> </table> <script> function over() { var e=document.getElementById("ee"); e.setAttribute("style","overflow:visible;background-color:#9F0")} function out() { var e=document.getElementById("ee"); e.setAttribute("style","overflow:hidden;background-color:#699")} </script> </div></div> <div class="dd" onmouseover="this.className='ddd'" onmouseout="this.className='dd'">饮品<div class="pp"> <table cellpadding="0" cellspacing="0" style="background-color:#FCC"> <tr> <td >果汁</td> <td >奶茶</td> <td >白开水</td> </tr> </table> </div></div> <div class="ff" onmouseover="this.className='fff'" onmouseout="this.className='ff'">甜点<div class="pp"> <table cellpadding="0" cellspacing="0" style="background-color:#F30"> <tr> <td >冰激凌</td> <td >爆米花</td> <td >棉花糖</td> </tr> </table> </div></div> <script> function over() { var a=document.getElementById("aa"); a.setAttribute("style","overflow:visible;background-color:#399")}//这部分可以没有 function out() { var a=document.getElementById("aa"); a.setAttribute("style","overflow:hidden;background-color:#0FF")} </script> </div> </body> </html>
纵向的
<title>纵向</title> <style> * { margin:0px; padding:0px;} .aa { height:40px; width:80px; top:100px; left:300px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#9F3} .aaa { height:40px; width:80px; top:100px; left:300px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#399;} .bb { height:40px; width:80px; top:40px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#669} .bbb { height:40px; width:80px; top:40px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#6C3} .cc { height:40px; width:80px; top:80px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#0F0} .ccc { height:40px; width:80px; top:80px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#303;} .dd { height:40px; width:80px; top:120px; position:absolute; overflow:hidden; line-height:40px; text-align:center; background-color:#399} .ddd { height:40px; width:80px; top:120px; position:absolute; overflow:visible; line-height:40px; text-align:center; background-color:#C63} #q1 { top:0px; left:80px; position:absolute;} table { height:120px; width:80px; border:0px; text-align:center; vertical-align:middle } </style> </head> <body> <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">餐厅 <div class="bb" onmouseover="this.className='bbb'" onmouseout="this.className='bb'">主食<div id="q1"> <table cellpadding="0" cellspacing="0" style="background-color:#6C3"> <tr><td>馒头</td></tr> <tr><td>米饭</td></tr> <tr><td>披萨</td></tr> </table> </div></div> <div class="cc" onmouseover="this.className='ccc'" onmouseout="this.className='cc'">饮品<div id="q1"> <table cellpadding="0" cellspacing="0" style="background-color:#303"> <tr><td>稀饭</td></tr> <tr><td>果汁</td></tr> <tr><td>奶茶</td></tr> </table> </div></div> <div class="dd" onmouseover="this.className='ddd'" onmouseout="this.className='dd'">甜品<div id="q1"> <table cellpadding="0" cellspacing="0" style="background-color:#C63"> <tr><td>冰激凌</td></tr> <tr><td>爆米花</td></tr> <tr><td>棉花糖</td></tr> </table> </div></div> </body> </html>