Vises ok i Firefox men ikke i IE... men hvorfor?

Hej

Nedenstående script er en forsimplet version af min menu, som er ude i problemer..

Der er en horisontal mainmenubar (her med 1 item)
Når musen holdes over, vises en DIV indeholdende en dropdownmenu.
Når musen holdes over ITEM2 i dropdownmenuen, skal endnu en DIV vises ved siden af. Men i IE8 bliver den clippet til dropdownmenuen. I firefox vises det korrekt.

Jeg er kørt fast, og håber at en tålmodig sjæl kan yde lidt start-hjælp :)

/Morten




<style>
.mainmenu{
height:30px;
border-style:none;
position:relative;
background-image:url('img/menubar.gif');
z-index:0;
overflow:visible;
}

.mainmenuitem{
position:relative;
float:left;
width:120px;
height:30px;
padding-top:5px;
padding-left:4px;
font-family:verdana;
font-size:16px;
cursor:pointer;
color:white;
background-image:url('img/menubar.gif');
overflow:visible;
}

.dropdown{
position:absolute;
left:0px;
top:30px;
width:145px;
border-style:none;
background-color:black;
display:none;
filter:alpha(opacity=97);
-moz-opacity:0.97;
-khtml-opacity:0.97;
opacity:0.97;

overflow:visible;

border-style:solid;
border-color:yellow;
border-width:1px;

}

.sidedrop{
position:absolute;
left:130px;
top:-24px;
width:145px;
background-color:black;
display:none;
filter:alpha(opacity=97);
-moz-opacity:0.97;
-khtml-opacity:0.97;
opacity:0.97;

overflow:visible;

border-style:solid;
border-color:white;
border-width:1px;
}

.menuitem{
font-weight:bold;
color:#c0c0c0;
padding:4px;
margin-top:2px;
margin-bottom:2px;
}
</style>

<script>
function toggledrop(d,onoff){
var dd = document.getElementById(d);
if (!dd) { return; }
if (onoff==true){
  dd.style.display = "block";
}else{
  dd.style.display = "none";
}
}
</script>

<div class=mainmenu>
<div class=mainmenuitem id=1 onmouseover="toggledrop('drop1',true);" onmouseout="toggledrop('drop1',false);">hej
<div class=dropdown id=drop1>
<div class=menuitem id=i1>item1</div>
<div class=menuitem id=i2 onmouseover="toggledrop('s1',true);" onmouseout="toggledrop('s1',false);">item2
<div style='position:relative;overflow:visible;'>
<div class=sidedrop id=s1>
<div class=menuitem id=i3>item3</div>
</div>
</div>
</div>
</div>
</div>
</div>