Hey guys, I have a site with a CSS driven drop down menu and a page that has an iframe in it. Everything works fine until the iframe has a pdf or word document sent to it. Once that happens, the drop down menu only shows the top of the dropdown and the rest seems to float under the iframe. I want to find a way to make sure the css menu stays on top of the iframe. Here is my code:
CSS **************************
*****
body {
font: normal 11px verdana;
}
#nav, #nav ul {
padding: 0;
width:1000px;
margin: 0 auto;
list-style: none;
line-height: 1;
}
#nav a {
width: 13em;
display: block;
border: 1px solid #ccc;
text-decoration: none;
color: #777;
padding:4px;
background-color: #fff;
text-align: center;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
left: -999em;
width: 13em;
}
#nav li ul ul {
left: -999em;
}
#nav li a:hover {
color: #FF8000;
background-color: #f9f9f9;
}
#nav li:hover ul, #nav li.over ul {
left: auto;
}
HTML index page **************************
**********
*****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Commercial Services Group - Resource Page</title>
<script type="text/javascript">
startList = function() {
if (document.all&&document.ge
tElementBy
Id) {
navRoot = document.getElementById("n
av");
for (i=0; i<navRoot.childNodes.lengt
h; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function(
) {
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.classN
ame.replac
e(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<link rel=stylesheet href="css/style.css" type="text/css">
</head>
<body>
<center>
<img src="images/banner.jpg">
</center>
<ul id="nav">
<li><a href="home/intro.html" target="main">Home</a>
<ul>
<li><a href="home/news.html" target="main">What's New</a></li>
</ul>
</li>
<li><a href="reference/reference.
html" target="main">Reference</a
>
<ul>
<li><a href="reference/reference.
html#admin
istration"
target="main">Administrati
on</a></li
>
<li><a href="reference/reference.
html#distr
ibuted_gen
" target="main">Distributed Generation</a></li>
<li><a href="reference/reference.
html#gener
al" target="main">General</a><
/li>
<li><a href="reference/reference.
html#proje
ct_proc" target="main">Project Processes</a></li>
<li><a href="reference/reference.
html#sales
_lib" target="main">Sales Library</a></li>
<li><a href="reference/reference.
html#spruc
e_meadows"
target="main">Spruce Meadows</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="projects/completed_i
ss.html" target="main">Completed Issues</a></li>
<li><a href="projects/large_proj.
html" target="main">Large Projects</a></li>
</ul>
</li>
<li><a href="#">Links</a>
<ul>
<li><a href="links/external.html"
target="main">External Websites</a></li>
<li><a href="links/internal.html"
target="main">Internal References</a></li>
</ul>
</li>
<li><a href="meeting_minutes/sale
s_meetings
.html" target="main">Meeting Minutes</a>
<ul>
<li><a href="meeting_minutes/sale
s_meetings
.html#2005
" target="main">Sales Meetings 2005</a></li>
<li><a href="meeting_minutes/sale
s_meetings
.html#2004
" target="main">Sales Meetings 2004</a></li>
<li><a href="meeting_minutes/sale
s_meetings
.html#2003
" target="main">Sales Meetings 2003</a></li>
</ul>
</li>
<li><a href="#">Help</a>
<ul>
<li><a href="mailto:jayce.loh@atc
oelectric.
com?subjec
t=Resource
Page Request">Contact</a></li>
<li><a href="help/search.html" target="main">Search</a></
li>
</ul>
</li>
</ul>
<center><p><p><p>
<table width="1000" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td><iframe name="main" height="750" width="1000" frameborder="0" src="home/intro.html"></if
rame></td>
</tr>
</table>
</center>
</body>
</html>
Any ideas?
