<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #ul1 li{ width: 100px; height:20px; line-height: 20px; text-align: center; position: relative; float: left; text-decoration: none; background-color: #9F3; border: 1px solid #660; } #ul1 li div{ background-color: #ccc; overflow: hidden; position: absolute; top:20px; width: 100%; height: 0; } </style> <script src="move3.js"></script> <script> window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ var oDiv=this.getElementsByTagName('div')[0]; oDiv.style.height='auto'; var iHeight=oDiv.offsetHeight; oDiv.style.height=0; startMove(oDiv,{opacity:100,height:iHeight}); }; aLi[i].onmouseout=function(){ var oDiv=this.getElementsByTagName('div')[0]; startMove(oDiv,{opacity:0,height:0}); } } } </script> </head> <body> <ul id="ul1"> <li> 首页 <div> asfsdf <br/> sfsd sdafasd <br/> sdfdf </div> </li> <li> 产品 <div> asfsdf <br/> sdfsdf <br/> sdfsdf <br/> sdfsdf <br/> sfsd sdafasd <br/> sdfdf </div> </li> <li> 关于 <div> asfsdf <br/> sfsd sdafasd <br/> sdfdf </div> </li> </ul> </body> </html>
伸缩菜单
最新推荐文章于 2022-06-24 17:55:17 发布