Hi i try to make simple DHTML menu but i have any little problem :-(
The problem is..... i hide the body of the menu when mouse is (normaly) out
of the body...but.... the event onmouseout is generated when the mouse out
from one of the entry of my menu......
someone can help me to understand why ?????
look this is my code:
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
..ProMenu{
position:absolute;
left:100px;
top:100px;
width:200px;
height:66px;
z-index: 50;
visibility: visible;
}
..ProMenuHead {
position:relative;
left:0px;
top:1px;
width:200px;
height:22px;
z-index: 50;
visibility: visible;
background-color: #CCCCCC;
}
..ProMenuBody {
position:absolute;
background-color: #885599;
left:100px;
top:124px;
width:200;
padding-left:4;
padding-right:4;
padding-top:1;
padding-bottom:1
visibility;
z-index: 51;
visibility: hidden;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 30;
}
..ProMenuBodyMask {
position:absolute;
background-color: #885599;
left:100-5;
top:122-22;
width:200+10;
height:400;
visibility:hidden;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 48;
}
a.MenuPro
{
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
a.MenuPro:hover
{
color:#ffffff;
text-decoration:underline;
font-weight:bold;
}
</style>
<script language="JavaScript1.2">
function Affiche(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="visi ble";
} else if (document.all) {
document.all[id].style.visibility="visible";
} else if (document.layers) {
document.layers[id].visibility="visible";
} }
function Masque(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="hidd en";
} else if (document.all) {
document.all[id].style.visibility="hidden";
} else if (document.layers) {
document.layers[id].visibility="hidden";
} }
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Menu" class="ProMenu" >
<div id="Head" class="ProMenuHead" onMouseOver="Affiche('MBody');">
<div align="center"><strong><font
color="#FFFFFF">MENU1</font></strong></div>
</div>
</div>
<div id="MBody" class="ProMenuBody" onMouseOut="Masque('MBody');">
<p>
<a href="#" class="MenuPro">truc</a><br>
<a href="#" class="MenuPro">chose</a>
</p>
</div>
</body>
</html>
