html鼠标移入显示下拉框,小白求助!鼠标移入移出显示下拉菜单问题!

是不是导航栏中的每个菜单移入移出都得分开不同的函数,都要重新命名不同的变量吗?不然怎么避免我鼠标移入这个菜单,别的菜单的下拉不会显示的问题?

这是我写的一个代码:

二级菜单下拉

*{

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;

}

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";

}

你可能感兴趣的:(html鼠标移入显示下拉框)