我想当鼠标移出menubar和menubar2两个层后便将其隐藏,可现在鼠标还没有移出那两个层变会隐藏,不明白为什么希望高手帮忙改正……谢谢!!!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
var maxmnus = 3
function opTab(event) {
var mnu = document.getElementById("menubar");
var arrdiv = document.getElementById("arrow");
var arrtxt = document.getElementById("arr"); var mnu2 = document.getElementById("menubar2");
var arrdiv2 = document.getElementById("arrow2");
var arrtxt2 = document.getElementById("arr2");
if ((mnu.style.display != "block") || (mnu.style.display == "")) {
mnu.style.display = "block";
arrdiv.style.left = mnu.offsetWidth + "px"; mnu2.style.display = "block"
mnu2.style.width = "750px";
arrdiv2.style.left = "220px";
arrdiv2.style.top = "160px";
arrdiv2.style.width = "750px";
}
event.cancelBubble = true;
}
function func() {
document.getElementById("menubar").style.display = "none"
document.getElementById("arrow").style.left = 0;
document.getElementById("menubar2").style.display = "none"
document.getElementById("arrow2").style.left = 0; document.getElementById("arrow2").style.width = "970px";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.top = "0px";
}
function outM(event) {
setInterval("func()", 4000);
}
</script> <style type="text/css">
#main_content
{
position: relative;
}
#menubar
{
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #7C6F57;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
}
.indicator
{
color: #b24426;
font-family: Webdings;
font-weight: bold;
font-size: 10px;
}
.r1
{
position: relative;
top: 10px;
left: 5px;
width: 213px;
color: #e7e8f1;
border-left: #e7e8f1 2px outset;
border-top: #e7e8f1 2px outset;
border-right: #e7e8f1 2px outset;
border-bottom: #e7e8f1 2px outset;
padding-left: 5px;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
background-repeat: repeat-y;
cursor: hand;
}
.submenu1
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
border-left: #e0f8e3 2px inset;
border-top: #e0f8e3 2px inset;
border-right: #e0f8e3 2px inset;
border-bottom: #e0f8e3 2px inset;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
display: none;
color: #2644b2;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
background-color: #cff1d4;
background-repeat: repeat-y;
}
.submenu2
{
position: relative;
top: 0px;
left: 0px;
width: 90%;
border-left: #e0f8e3 3px groove;
border-top: #e0f8e3 3px groove;
border-right: #e0f8e3 3px groove;
border-bottom: #e0f8e3 3px groove;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-top: 4px;
display: none;
background-color: #cff1d4;
color: #2644b2;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 10px;
background-repeat: repeat-y;
}
.pulltab
{
position: absolute;
top: 0px;
left: 0px;
height: 600px;
width: 10px;
font-size: 10px;
z-index: 5;
background-color: #666;
}
.mtab
{
position: relative;
top: 0px;
}
.btninner
{
cursor: hand;
width: 100%;
}
#menubar2
{
position: absolute;
top: 0px;
left: 220px;
display: none;
background-color: #EDF6FF;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
border: solid 1px #AABCE0;
}
.pulltab2
{
background-color: #666666;
font-size: 10px;
height: 10px;
left: 10px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
}
</style>
</head><body>
<div id="nav">
<div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
</div>
<div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
</div>
</div>
<div id="navb">
<div id="arrow" class="pulltab" onmouseover="opTab(event)">
</div>
<div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
</div>
</div>
<div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
var maxmnus = 3
function opTab(event) {
var mnu = document.getElementById("menubar");
var arrdiv = document.getElementById("arrow");
var arrtxt = document.getElementById("arr"); var mnu2 = document.getElementById("menubar2");
var arrdiv2 = document.getElementById("arrow2");
var arrtxt2 = document.getElementById("arr2");
if ((mnu.style.display != "block") || (mnu.style.display == "")) {
mnu.style.display = "block";
arrdiv.style.left = mnu.offsetWidth + "px"; mnu2.style.display = "block"
mnu2.style.width = "750px";
arrdiv2.style.left = "220px";
arrdiv2.style.top = "160px";
arrdiv2.style.width = "750px";
}
event.cancelBubble = true;
}
function func() {
document.getElementById("menubar").style.display = "none"
document.getElementById("arrow").style.left = 0;
document.getElementById("menubar2").style.display = "none"
document.getElementById("arrow2").style.left = 0; document.getElementById("arrow2").style.width = "970px";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.top = "0px";
}
function outM(event) {
setInterval("func()", 4000);
}
</script> <style type="text/css">
#main_content
{
position: relative;
}
#menubar
{
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #7C6F57;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
}
.indicator
{
color: #b24426;
font-family: Webdings;
font-weight: bold;
font-size: 10px;
}
.r1
{
position: relative;
top: 10px;
left: 5px;
width: 213px;
color: #e7e8f1;
border-left: #e7e8f1 2px outset;
border-top: #e7e8f1 2px outset;
border-right: #e7e8f1 2px outset;
border-bottom: #e7e8f1 2px outset;
padding-left: 5px;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
background-repeat: repeat-y;
cursor: hand;
}
.submenu1
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
border-left: #e0f8e3 2px inset;
border-top: #e0f8e3 2px inset;
border-right: #e0f8e3 2px inset;
border-bottom: #e0f8e3 2px inset;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
display: none;
color: #2644b2;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
background-color: #cff1d4;
background-repeat: repeat-y;
}
.submenu2
{
position: relative;
top: 0px;
left: 0px;
width: 90%;
border-left: #e0f8e3 3px groove;
border-top: #e0f8e3 3px groove;
border-right: #e0f8e3 3px groove;
border-bottom: #e0f8e3 3px groove;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-top: 4px;
display: none;
background-color: #cff1d4;
color: #2644b2;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 10px;
background-repeat: repeat-y;
}
.pulltab
{
position: absolute;
top: 0px;
left: 0px;
height: 600px;
width: 10px;
font-size: 10px;
z-index: 5;
background-color: #666;
}
.mtab
{
position: relative;
top: 0px;
}
.btninner
{
cursor: hand;
width: 100%;
}
#menubar2
{
position: absolute;
top: 0px;
left: 220px;
display: none;
background-color: #EDF6FF;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
border: solid 1px #AABCE0;
}
.pulltab2
{
background-color: #666666;
font-size: 10px;
height: 10px;
left: 10px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
}
</style>
</head><body>
<div id="nav">
<div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
</div>
<div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
</div>
</div>
<div id="navb">
<div id="arrow" class="pulltab" onmouseover="opTab(event)">
</div>
<div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
</div>
</div>
<div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
var maxmnus = 3
function opTab(event) {
var mnu = document.getElementById("menubar");
var arrdiv = document.getElementById("arrow");
var arrtxt = document.getElementById("arr"); var mnu2 = document.getElementById("menubar2");
var arrdiv2 = document.getElementById("arrow2");
var arrtxt2 = document.getElementById("arr2");
if ((mnu.style.display != "block") || (mnu.style.display == "")) {
mnu.style.display = "block";
arrdiv.style.left = mnu.offsetWidth + "px"; mnu2.style.display = "block"
mnu2.style.width = "750px";
arrdiv2.style.left = "220px";
arrdiv2.style.top = "160px";
arrdiv2.style.width = "750px";
}
event.cancelBubble = true;
}
function func() {
document.getElementById("menubar").style.display = "none"
document.getElementById("arrow").style.left = 0;
document.getElementById("menubar2").style.display = "none"
document.getElementById("arrow2").style.left = 0;
document.getElementById("arrow2").style.width = "970px";
document.getElementById("arrow2").style.left = "0px";
document.getElementById("arrow2").style.top = "0px";
}
function outM(event) {
setInterval("func()", 4000);
}
</script>
<style type="text/css">
#main_content
{
position: relative;
}
#menubar
{
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: #7C6F57;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
}
.pulltab
{
position: absolute;
top: 0px;
left: 0px;
height: 600px;
width: 10px;
font-size: 10px;
z-index: 5;
background-color: #666;
}
#menubar2
{
position: absolute;
top: 0px;
left: 220px;
display: none;
background-color: #EDF6FF;
font-family: Verdana,Helvetica,Arial;
font-weight: 700;
font-size: 12px;
cursor: hand;
z-index: 5;
background-repeat: repeat-y;
border: solid 1px #AABCE0;
}
.pulltab2
{
background-color: #666666;
font-size: 10px;
height: 10px;
left: 10px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
}
</style>
</head>
<body>
<div id="nav">
<div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
</div>
<div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
</div>
</div>
<div id="navb">
<div id="arrow" class="pulltab" onmouseover="opTab(event)">
</div>
<div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
</div>
</div>
<div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
</div>
</body>
</html>