<!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=gb2312" /> <title>无标题文档</title> <style> body,ul{margin:0;padding:0;} li{width:100px;height:30px;line-height:30px;float:left;border:1px solid #000;text-align:center;background:#00FFFF;list-style:none;position:relative;} li div{position:absolute;top:30px;left:0;filter:alpha(opacity=0);opacity:0;width:100%; height:0;overflow:hidden;} /*这里的height:必须要写，overflow:也必须要写，不然没有下拉的效果*/ </style> <script src="perfectStartMove.js"></script> <script> window.onload = function(){ var arrLi = document.getElementsByTagName('li'); for(var i=0;i<arrLi.length;i++){ arrLi[i].onmouseover = function(){ var oDiv = this.getElementsByTagName('div')[0]; oDiv.style.height = 'auto'; var heightVlaue = oDiv.offsetHeight; oDiv.style.height = 0; perfectStartMove(oDiv,{height:heightVlaue,opacity:100}); }; arrLi[i].onmouseout = function(){ var oDiv = this.getElementsByTagName('div')[0]; perfectStartMove(oDiv,{height:0,opacity:0}); }; } }; </script> </head> <body> <ul> <li> 首页 <div> 第三十<br /> esfsdfds <br /> dfdfd <br /> fd </div> </li> <li> 产品 <div> fcd<br /> esfsdfds <br /> dfdfd </div> </li> <li> 联系我们 <div> 读书三<br /> ttt <br /> dfdfd <br /> fd </div> </li> </ul> </body> </html>
js 实现简单的导航下拉列表
猜你喜欢
转载自www.cnblogs.com/moon-yyl/p/9006918.html
今日推荐
周排行