Hi everyone, I have searched everywhere for a solution to this problem and I hope someone may be able to help.

I have a dropdown menu and in FF the dropdown options display perfectly, however in IE the menu disappears whenever I attempt to rollover the item. Also, the dropdown menu is rendered "behind the content" - by this I mean the pictures graphics etc on the page.

Here's my code:

.xmenu ul{
position:absolute;
list-style-type:none;
padding:0;
margin:0;
right: 0em;
bottom: 0em;
width:auto;
font-size:85%;
}

.xmenu li{
display:inline; padding: 0; background: none;
}

.xmenu table{
position:absolute;
border-collapse:collapse;
left:0px;
top:25px;
}

.xmenu a, .xmenu :visited {
display: block; font-size: 1.05em; width: 86px;
text-align: center; text-decoration: none; overflow: hidden;
color: #fff; height: 30px; line-height: 32px; background: url(img/test.gif); float: left;
}

.xmenu :hover{
text-decoration: none; background-position: left -30px;
}

.xmenu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
left:258px;
}

.xmenu ul li:hover ul, .xmenu ul a:hover ul {
display:block; width:86px; line-height:32px;
float:left;
visibility:visible;
top:1px;
}


I'd appreciate any help!
Thanks