Perchè quando passo sul primo div (Aout) mi cambia correttamente lo sfondo solo al div (A) mentre quando passo sul secondo (Bout) mi cambia lo sfondo sia ad A che a B?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>div</title>
<style>
body, html { font-family: Tahoma, verdana, arial, helvetica, sans-serif;font-size:14px;}
a:link.menudiv, a:visited.menudiv {font-weight: normal; color:#ffffff; font-size: 12px; text-decoration: none; margin:2px}
a:hover.menudiv {font-weight: normal; color:#cccccc; font-size: 14px; text-decoration: none; margin:2px}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="v isible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="h idden"
}
</script>
</head>
<body>
<div id="Aout" style="position: relative; border:1px solid #000099; width:530px;height:147px; background-color:#FFCCFF;" onmouseover="showmenu('A')" onmouseout="hidemenu('A')">
<div Id="A" style="width:530px;height:107px; padding:0px; background-color:#990000; visibility:hidden;">
<div style="padding:10Px;text-align:left;">
<span style="color: white">&raquo; </span>&raquo; </span><a class=menudiv href=#>Abbbb

<span style="color: white">&raquo; </span><a class=menudiv href=#>Acccc</a>
</div>
</div>
<div style="width:530px;height:40px;position:absolute;b ottom:0px;right:0px;text-align:right;}">
<span style="color:black;font-size:40px;">Aaaaaaaaaa</span>
<div>
</div>


<div id="Bout" style="position: relative; border:1px solid #000099; width:530px;height:147px; background-color:#CCCCFF;" onmouseover="showmenu('B')" onmouseout="hidemenu('B')">
<div Id="B" style="width:530px;height:107px; padding:0px; background-color:#003399;visibility:hidden;">
<div style="padding:10Px;text-align:left;">
<span style="color: white">&raquo; </span>&raquo; </span><a class=menudiv href=#>Bbbbb

<span style="color: white">&raquo; </span><a class=menudiv href=#>Bcccc</a>
</div>
</div>
<div style="width:530px;height:40px;position:absolute;b ottom:0px;right:0px;text-align:right;}">
<span style="color:black;font-size:40px;">Bbbbbbbbb</span>
<div>
</div>
</body>
</html>