<!DOCTYPE html>
<html>
<head>
<title></title>
<mata http-equiv=”content-type” content=”text/html; charset=gb2312” />
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#nav {
margin-top: 50px;
margin-left: 30px;
}
ul .one {
float: left;
background: #eedbdb;
height: 30px;
line-height: 30px;
text-align: center;
color: #000000;
}
ul li {
width: 120px;
list-style: none;
}
ul li a {
text-decoration: none;
}
.one ul {
display: none;
}
ul .one:hover {
background: #ff6a00;
}
</style>
</head>
<body>
<ul id="nav">
<li class="one">
<a href="#">栏目一</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目二</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目三</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目四</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目五</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
</ul>
</body>
</html>
<script type="text/javascript">
var aA = document.getElementById('nav').getElementsByTagName('ul');
console.log(aA);
var This = this;
for (var i = 0; i < aA.length; i++) { aA[i].onmouseover = function () { This.style.display = "block"; } }
</script>
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#nav { margin-top: 50px; margin-left: 30px; } ul .one { float: left; background: #eedbdb; height: 30px; line-height: 30px; text-align: center; color: #000000; } ul li { width: 120px; list-style: none; } ul li a { text-decoration: none; } .one ul { display: none; } ul .one:hover { background: #ff6a00; } </style>
<ul id="nav"> <li class="one"> <a href="#">栏目一</a> <ul class="two"> <li>二级栏目</li> <li>二级栏目</li> <li>二级栏目</li> </ul> </li> <li class="one"> <a href="#">栏目二</a> <ul class="two"> <li>二级栏目</li> <li>二级栏目</li> <li>二级栏目</li> </ul> </li> <li class="one"> <a href="#">栏目三</a> <ul class="two"> <li>二级栏目</li> <li>二级栏目</li> <li>二级栏目</li> </ul> </li> <li class="one"> <a href="#">栏目四</a> <ul class="two"> <li>二级栏目</li> <li>二级栏目</li> <li>二级栏目</li> </ul> </li> <li class="one"> <a href="#">栏目五</a> <ul class="two"> <li>二级栏目</li> <li>二级栏目</li> <li>二级栏目</li> </ul> </li> </ul>
其中This是指哪个对象呢? 应该是当前鼠标经过的ul对象吧,所以可以试试这样。
//var This = this;
for (var i = 0; i < aA.length; i++) { aA[i].onmouseover = function () { this.style.display = "block"; }}
试试放在 window.onload = function() {}; 代码块里
这个什么? 看起来怎么这么复杂呢?
首先script代码块得放在html里吧,放在head里试试。
另外,在下面的样式中加上 display:block; 就不需要js了
ul .one:hover {
background: #ff6a00;
display:block;
}
对象事件都绑定错了,ul隐藏你绑定鼠标事件不会触发,给a绑定
<!DOCTYPE html>
<html>
<head>
<title></title>
<mata http-equiv=”content-type” content=”text/html; charset=gb2312” />
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#nav {
margin-top: 50px;
margin-left: 30px;
}
ul .one {
float: left;
background: #eedbdb;
height: 30px;
line-height: 30px;
text-align: center;
color: #000000;
}
ul li {
width: 120px;
list-style: none;
}
ul li a {
text-decoration: none;
}
.one ul {
display: none;
}
ul .one:hover {
background: #ff6a00;
}
</style>
</head>
<body>
<ul id="nav">
<li class="one">
<a href="#">栏目一</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目二</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目三</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目四</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
<li class="one">
<a href="#">栏目五</a>
<ul class="two">
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</li>
</ul>
</body>
</html>
<script type="text/javascript">
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++)
aA[i].onmouseover = aA[i].onmouseout = function (e) {
var t = (e || window.event).type;
this.parentNode.getElementsByTagName('ul')[0].style.display =t=='mouseover'? 'block':'none'
}
</script>