<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<link rel="stylesheet" href="three-level.css">
<!-- <script>
window.onload = function() {
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].onmouseout = function () {
var u = this. getElementsByTagName("ul")[0];
if (u !== undefined) {
u.style.display = "none";
}
}
}
}
</script> -->
<script src="../../../jQuery/jquery-1.11.2.min.js"></script>
//jQuery的包要单独在一个script里引入！
<script>
$(document).ready(function() {
$("li")
.mouseover(
<span style="color:#ff0000;">//jQuery是事件，如ready!而Js里是事件处理所以是onmouesover</span>
function() {
$(this).children("ul").show();
})
.mouseout(
function() {
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li>
<a href="#">
课程大厅
</a>
<!-- <ul id="second-nav">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">jQuery</a>
</li>
</ul> -->
</li>
<li>
<a href="#">
学习中心
</a>
<ul id="second-nav">
<li>
<a href="#">ios开发</a>
<ul id="third-nav">
<li>
ios游戏开发
</li>
<li>
ios软件开发
</li>
</ul>
</li>
<li>
<a href="#">安卓开发</a>
</li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</div>
</body>
</html></span>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
