The actual case shows itself when using the Document Viewer task flow to display a .PDF file. The Task Flow is placed directly below the CSS dropdown menu. This task flow uses an iFrame to bring in the PDF file which causes the Browser to display the doc in the acrobat reader inside of the iframe. When the user passes the cursor over the CSS menu, the submenus drop down as they should. however, in IE, the drop downs get clipped by the iframe, as though their z-indexes are messed up. However, after a lot of research, it appears that regardless of the z-index, the iframe is "always on top". The code below is a simplified version that reproduces the problem. Docs on the internet suggest adding ?wmode=opaque or ?wmode=transparent as a URL parameter to the src attrib of the iframe. i tried that and it does not work.
Another note: ADF Faces menus work fine. Either CSS or Faces menus work fine on FF and Chrome, and I assume Safari.
A third note: I set display: block; in '#navbar li ul' because IE also does not drop the menu down like it is supposed to. That is another problem also, which I don't want to deal with here. Oh, in case anybody asks, IE sux.
A fourth note: To reproduce this, simply change the src attrib of the iframe to point to any .pdf document.
A final note: IE sux. :)
<html>
<head>
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 1em;
position:relative;
z-index: 999;
}
#navbar li {
list-style: none;
float: left;
position:relative;
z-index: 1001;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
position:relative;
z-index: 1000; }
#navbar li ul {
position: relative;
display: block;
width: 60px;
top:0;
left:0;
background-color: #69f;
z-index: 2000;}
#navbar li:hover ul {
display: block;
position: absolute;
width: 60px;
top:0;
left:0;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
</style>
</head>
<body>
<div id="navbox-aramark">
<ul id="navbar">
<li>
Menubar Item
<ul>
<li class="childnode">
child 1</li>
<li class="childnode">
child 2</li>
<li class="childnode">
child 3</li>
<li class="childnode">
child 4</li>
<li class="childnode">
child 6</li>
<li class="childnode">
child 7</li>
<li class="childnode">
child 8</li>
<li class="childnode">
child 9</li>
</ul>
</li>
</ul>
</div>
<div>
<iframe id="T:oc_9941994312region1:dlpgpt1:if2::f"
frameborder="0"
style="position:absolute; top:50; left:0; width:100%; z-index: 0;"
src="http://.../.../.../myfile.pdf"
title="Document preview">
</div>
</body>
</html>