I am rendering a small menu in the upper right-hand corner of a web site. There will always be a "Banner" graphic across the top of the page (1024x80 pixels) and the menu must render on top of it. In IE 7, IE 8, FireFox and Safari, the menu looks fine. In IE 6, however, the menu does appear sometimes and fails to appear at other times with no discernable pattern. In the CSS shown below, I placed the "z-index" in the class definitions after reading that this was a fix for some CSS problems of this type in IE 6. However, there is still no joy in Renderville. ANY help will be appreciated!

Here is the CSS defined for the page, the header and the menu:

```
Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }

```

Here is the HTML that uses these CSS classes:

```
<div class="XPage">
    <div class="XHeader">
        <a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
    </div>
    <div class="XTopMenu">
        <div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
        <div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
        <div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
    </div>
    ...
</div>

```