<!DOCTYPE html><html><head><meta charset="UTF-8"><title>二级菜单的显示与隐藏</title><style> ul{ margin:0; padding: 0; list-style: none; } li{ width: 100px; height: 30px; border:1px solid green; text-align: center; float: left; margin:15px; } #nav2{ position: absolute; top: 50px; left: 50px; } #nav2 li{ display: none; }</style></head><body> <ul id="nav1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <ul id="nav2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script> var nav1=document.getElementById("nav1").getElementsByTagName("li"); var nav2=document.getElementById("nav2").getElementsByTagName("li"); for(var i=0;i<nav1.length;i++){ nav1[i].index=i nav1[i].onmouseover=function(){ nav2[this.index].style.display="block"; } nav1[i].onmouseout=function(){ var t=setTimeout( function(){nav2[this.index].style.display="none";},1000) } // nav2[this.index].onmouseover=function(){ // clearTimeout(t); // nav2[this.index].style.display="block"; // } // nav2[this.index].onmouseout=function(){ // nav2[this.index].style.display="none"; // } } </script></body></html>
添加回答
举报
0/150
提交
取消