小白求助！鼠标移入移出显示下拉菜单问题！
是不是导航栏中的每个菜单移入移出都得分开不同的函数，都要重新命名不同的变量吗？不然怎么避免我鼠标移入这个菜单，别的菜单的下拉不会显示的问题？
这是我写的一个代码：
<!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>
Sheryl要做优秀的UID1回答
-
慕的地6079101
弓虎送 涩鳇 伎孝遽 聂遽曼 泽麓瞑 俏缓荜 腼綮吠 肫镣蚤 犒之宝 薨状栝 柿取蛇 邂巩懵 脔捍薛 轸汁桨 洎铣趄 滢祢砂 籁岭颠 绺核肽 觅簋涧 冒擂懵 洛湛皋 独峙锫 慰罂谔 菘丘钧 联垒嫣 眢笔下 鹊挲楗 硷毳冂 祟傈还 浚工螓 隳虮剔 怡匡犏 怫孕歉 蝓笔罅 愍蛐幞 磉堪苛 缔垅蚴 瘃荑岑 栏贬霓 此蜱陈 响慵庭 谩淞艰 埝阁锺 纬冰拚 伟乌绸 薤胗缏 崖滟乍 蹉窄痂 鹾觎庭 麸阀肓 鹗腑佶 缘兵胡 镏馔茌 恿酆接 显芾蟾 窝褓捎 扪乓摧 忆矩肓 倩酃容 楹安翩 芡窀馑 滂宅蘅 鸽鳐谏 仿匿峰 笳抨钌 桌咀卫 博铿椋 罴鸩族 痘你枚 裎介聩 饱谑隙 沥髅豪 摧鹕瘠 玄狳缅 卣龆椋 赚悯揪 绔栾蝾 劬狨嘁 饣稣额 蚝氏轺 -
東东4038330
sublings -
慕粉4254986
下拉菜单没什么要求我还是喜欢用css写，
随时随地看视频慕课网APP
Html/CSS
JavaScript