Hi,

I am working on a website with an expanding CSS Menu. On hover of a menu item, it expands with more menu items. It is using the on div hover, display:block option, but when using IE6, they do not expand.

Could anybody help me or know of anything/(where) i can get help from.

The code i am using is below:

---
Firstly the CSS from my style sheet, followed by the page code. Please bear in mind, the code includes positioning values for my web page.

div.mainmenu {
position: absolute;
left: 268px;
top: 144px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
z-index: 1;
list-style-image:url(images/arrow.jpg);
width: 641px;
cursor: pointer;
}

div.menu {
float:left;
text-align:left;
margin-right: 1px;
}

div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display:block;
position: absolute;
bottom: 15px;
margin-left:16px;
color: #000000;
}


div.menu div {
padding: 2px;
}


div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 3px; }
div.popup div + div, div.popup a + a { margin-top: 5px; }




PAGE CODE

Each Menu Item appears like this. there are about 5 of these consecutively.

<div class="menu">
<div>Menu Heading</div>
<div class="popup">
<li><a href="index.html">Menu Item 1</a></li>
<li><a href="index.html">Menu Item 2</a></li>
</div>
</div>



Any help appreciated,

Thanks.