二級導航–滑鼠懸浮菜單出現二級菜單
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title>滑鼠懸浮菜單出現二級菜單</title >
<style>
a{
color: #fff;
text-decoration: none;
}
ul {
margin: ;
list-style: none;
}
#menu {
width: px;
height: px;
background: slategray;
border-radius: px;
box-shadow: px px px snow;
}
#menu li {
float: left;
margin-top: px;
line-height: px;
padding: ;
position: relative;
}
#menu li a {
padding: px px;
display: inline-block;
}
#menu li .hover {
background: #fff;
opacity: ;
color: gray;
border-radius: px;
}
#menu li .lis {
width: px;
height: px;
line-height: px;
border-radius: px;
background: lightblue;
position: absolute;
top: px;
}
#menu li .lis a {
padding: px;
background: none;
opacity: ;
color: #fff;
}
#menu li .lis a:hover {
text-decoration: underline;
}
</style>
<script>
window.onload = function() {
var oUl = document.getElementById('menu');
var aLi = oUl.getElementsByTagName('li');
var aDiv = oUl.getElementsByTagName('div');
var timer = null;
for (var i = ; i < aLi.length; i++) {
var oA = aLi[i].getElementsByTagName('a')[];
oA.index = i;
clearTimeout(timer);
oA.onmouseover = function() {
this.className = 'hover';
aDiv[this.index].style.display = 'block';
}
oA.onmouseout = function() {
this.className = '';
n = this.index;
timer = setTimeout(function() {
aDiv[n].style.display = 'none';
}, );
}
aDiv[i].onmouseover = function() {
clearTimeout(timer);
this.style.display = 'block';
}
aDiv[i].onmouseout = function() {
this.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div>
<ul id = "menu">
<li>
<a href ="javascript:;" >首頁</a>
<div class ="lis" style ="display:none;">
<a href = "javascript:;">手機</a >
<a href = "javascript:;">電腦</a>
<a href="javascript:;">知識點</a>
</div>
</li>
<li>
<a href="javascript:;">品牌</a>
<div class="lis" style="display:none;">
<a href="javascript:;">華為</a>
<a href="javascript:;">小米</a>
<a href="javascript:;">蘋果</a>
</div>
</li>
<li>
<a href="javascript:;">課程</a>
<div class="lis" style="display:none;">
<a href="javascript:;">js課</a>
<a href="javascript:;">css3課</a>
<a href="javascript:;">HTML5課</a>
<a href="javascript:;">Jquery課</a>
</div>
</li>
</ul>
</div>
</body>
</html>
- 效果如下
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)