是不是导航栏中的每个菜单移入移出都得分开不同的函数,都要重新命名不同的变量吗?不然怎么避免我鼠标移入这个菜单,别的菜单的下拉不会显示的问题?
这是我写的一个代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级菜单下拉</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:14px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.nav{
list-style:none;
margin-top:20px;
padding-left:200px;
}
a{
text-decoration:none;
}
.nav li a{
display:block;
float:left;
color:black;
background-color:#DFDFDF;
width:100px;
height:30px;
line-height:30px;
margin-right:2px;
text-align:center;
}
.nav li a:hover{
background-color:#000000;
color:#FFFFFF;
}
.subNav{
position:absolute;
top:50px;
left:302px;
list-style:none;
display:none;
font-size:12px;
width:100px;
height:90px;
overflow:hidden;
}
.subNav2{
position:absolute;
top:50px;
left:506px;
list-style:none;
display:none;
font-size:12px;
width:100px;
height:120px;
overflow:hidden;
}
.subNav2 li a,.subNav li a{
background-color:#CBCBCB;
}
.subNav2 li a:hover,.subNav li a:hover{
background-color:#666464;
}
</style>
<script>
function m_over(){
var mymouseover=document.getElementsByClassName("subNav")[0];
mymouseover.style.display="block";
}
function m_out(){
var mymouseout=document.getElementsByClassName("subNav")[0];
mymouseout.style.display="none";
}
function M_over(){
var myMouseover=document.getElementsByClassName("subNav2")[0];
myMouseover.style.display="block";
}
function M_out(){
var myMouseout=document.getElementsByClassName("subNav2")[0];
myMouseout.style.display="none";
}
</script>
</head>
<body>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li onMouseOver="m_over(this)" onMouseOut="m_out(this)"><a href="#">BLOG</a>
<ul class="subNav" >
<li><a href="#">MINE</a></li>
<li><a href="#">OTHERS</a></li>
<li><a href="#">HOT BLOG</a></li>
</ul>
</li>
<li><a href="#">MAP</a></li>
<li onMouseOver="M_over(this)" onMouseOut="M_out(this)"><a href="#">PHOTOS</a>
<ul class="subNav2">
<li><a href="#">LAST MONTH</a></li>
<li><a href="#">ALL</a></li>
<li><a href="#">LIKED</a></li>
<li><a href="#">CLASSIFY</a></li>
</ul>
</li>
<li><a href="#">HELP</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
</body>
</html>
慕的地6079101
東东4038330
慕粉4254986