（此爲本人在慕課網上學習的筆記，記錄下方便日後學習）
<!DOCTYPE>
<!--
學習功能：實現下拉多級菜單
author: lisa於2018-5-27
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜單</title>
<style type="text/css">
.top-nav {
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li {
float: left;
margin-right: 1px;
}
.top-nav li a {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover {
background: red;
color: white;
}
.top-nav li ul {
display: none;
list-style: none;
padding: 0;
position: relative;
}
.top-nav li:hover ul {
display: block;
width: 80px;
}
.top-nav li:hover ul li ul {
display: none;
}
.top-nav li ul li:hover ul {
display: block;
position: absolute;
top: 0px;
left: 80px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首頁</a></li>
<li><a href="#">課程大廳</a></li>
<li><a href="#">學習中心 +</a>
<ul>
<li><a href="#">前端課程 +</a>
<ul>
<li><a href="#">javaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</li>
<li><a href="#">手機開發</a>
<ul>
<li><a href="#">ios</a></li>
<li><a href="#">安卓</a></li>
</ul>
</li>
<li><a href="#">後臺編程</a></li>
</ul>
</li>
<li><a href="#">關於我們</a></li>
</ul>
</body>
</html>
<!--ie6兼容hover -->
<script type="text/javascript">
window.onload = function () {
var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
if (ifIF6) {
var Lis = document.getElementsByTagName("li");
for (var i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = function () {
var u = this.getElementsByTagName("ul")[0];
if (u != undefined) {
u.style.display = "block";
}
}
Lis[i].onmouseover = function () {
var u = this.getElementsByTagName("ul")[0];
if (u = undefined) {
u.style.display = "none";
}
}
}
}
}
//用Jquery實現兼容,首先引入包<script typr="" url="">
$(function () {
//更高版本的Jquery使用$.support.leadingWhitespace來判斷IE瀏覽器是多少
if ($.browser.mise && $.browser.version.substr(0, 1) < 7) {
$("li").has("ul").mouseover(function () {
$(this).children("ul").css("display", "block");
}).mouseout(function () {
$(this).children("ul").css("display", "none");
})
}
})
</script>效果展示
