Hi,

I've got a bit of a problem with a site I'm working on. I'm not a professional web designer so I'm really stuck. I've cobbled together the following from various tutorials and am finding that when you mouse over the drop down menu and move down the list (in Firefox), the menu disappears as soon as it hits the top of the main content frame. It seems to work fine in IE though.

I've gone through and added every line of the style sheet one at a time from scratch and found that it is the overflow: auto that is causing the problem. I tried messing with the z-index, clear, floats etc but I'm now tired and admitting defeat.

Any help (in laymans terms) would be very much appreciated.

Cheers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
background-image: url(#);
color: #000000;
text-align: justify;
font-size: 1em;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 5px;
margin-left: 5px;}

p {
font-size: .9em;
line-height: 1.3em;
margin-right: 15px;}

#logo{
height: 100px;
background-image: url(#);
background-repeat: no-repeat;
background-position: 0px 0px;}

#search {
position: absolute;
top: 20px;
left: 550px;
font-family: Times, "Times New Roman", serif;
font-size: .75em;}

#search_box {
position: absolute;
top: 5px;
left: 50px}

#go_button{
position: absolute;
top: 5px;
left: 185px;}

#view_cart {
position: absolute;
top: 55px;
left: 560px;
font-family: Times, "Times New Roman", serif;
font-size: .75em;}

#view_cart a {
text-decoration: none;
color: green;}

#footer {
position: absolute;
color: black;
font-size: .75em;
text-align: left;
top: 540px;
left: 15px;}

.frame {
font-size: .9em;
line-height: 1.2em;
margin-left: 15px;
margin-right: 15px;}

.floatright_frame {
float: right;
margin: 10px;}

.floatleft_frame {
float: left;
margin: 10px;}

ul {
position: absolute;
padding: 0;
margin: 0;
top: 85px;
z-index: +1;
text-decoration: none;}

li {
float: left;
display: inline;
position: relative;
width: 8.9em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #7d6340;
border-width: 1px 0;
font-family: Times, "Times New Roman", serif;
font-size: .9em;
z-index: +1;}

li ul {
display: none;
position: absolute;
top: 105%;
left: 0;
padding: 0 0 1em 0;
background-color: white;
border: solid 1px #7d6340;
line-height: 1.3em}

li>ul {
top: auto;
left: auto;}

li li {
display: block;
border: 0;}

li:hover ul, li.over ul {
display: block;}

#nav a {
font-weight: bold;
color: green;
text-decoration: none;}

#nav li li a {
display: block;
font-weight: normal;
background-color: #ffffff;}

#nav li li a:hover {
font-weight: bold;}

li#first {
border-left-width: 1px;}

li#last {
border-right-width: 1px;}

#content_frame {
position: absolute;
top: 120px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #c3c3c3;
height: 400px;
padding-bottom: 20px;
width: 750px;
left: 15px;
overflow: auto;}
-->
</style>
<script language="JavaScript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<div id="logo"></div>
<ul id="nav">
<li id="first"><a href="#">Home</a></li>
<li><a href="#">Tea</a>
<ul>
<li><a href="#">Green Tea</a></li>
<li><a href="#">Wulong</a></li>
<li><a href="#">Flower Tea</a></li>
</ul>
</li>
<li><a href="#">Tea Cups</a>
<ul>
<li><a href="#">Fragrance Cups</a></li>
<li><a href="#">Gaiwan</a></li>
<li><a href="c#">Tea Cup Sets</a></li>
</ul>
</li>
<li><a href="#">Tea Pots</a>
<ul>
<li><a href="#">Clay Pots</a></li>
<li><a href="#">Porcelain Pots</a></li>
<li><a href="#">Glass Pots</a></li>
</ul>
</li>
<li><a href="#">Tea Wares</a>
<ul>
<li><a href="#">Tea Trays</a></li>
<li><a href="#">Utensils</a></li>
</ul>
</li>
<li id="last"><a href="#">Medical Supplies</a>
<ul>
<li><a href="#">Acupuncture Needles</a></li>
<li><a href="#">Moxa Burners</a></li>
<li><a href="#">Moxa</a></li>
</ul>
</li>
</ul>
<div id="search">
<p>Search</p>
<form method="get" action="http://search.atomz.com/search/">
<input id="search_box" size="15" name="sp-q"><br>
<input id="go_button" type="submit" value="Go">
<input type="hidden" name="sp-a" value="sp10033bc4">
<input type="hidden" name="sp-p" value="all">
<input type="hidden" name="sp-f" value="ISO-8859-1">
</form>
</div>
<div id="view_cart">
<a href="#">View Cart &nbsp;| &nbsp;</a>
<a href="#">About Us &nbsp;| &nbsp;</a>
<a href="#">Contact Us</a>
</div>
<div id="content_frame"> <img alt="Tea Cups" src="#"
class="floatright_frame" width="300" height="225"/>
<p class="frame">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
vulputate. Fusce consequat. Suspendisse quam eros, mollis a, bibendum in,
suscipit vel, urna. Morbi sapien velit, condimentum ac, imperdiet sit amet,
volutpat a, arcu. Phasellus sed tortor varius purus sodales ullamcorper. Quisque
vitae odio ac nulla pharetra consequat. Aenean pretium, purus ac tincidunt
auctor, ipsum sem fermentum sem, sed scelerisque ipsum magna id leo. Aliquam
erat volutpat. Phasellus sodales justo id turpis. Nulla sodales orci egestas
augue. Duis auctor pellentesque velit. Nam rhoncus porttitor sapien. Nulla
ipsum nisl, lacinia nec, dignissim non, rutrum ac, ante. Cras lacinia, erat
non ullamcorper porttitor, ipsum urna hendrerit mauris, sit amet feugiat wisi
est nec libero. Nulla lobortis ultrices enim. Etiam varius, ante vel vestibulum
bibendum, metus purus dictum magna, eu bibendum mauris enim vitae purus.</p>
<p class="frame">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
vulputate. Fusce consequat. Suspendisse quam eros, mollis a, bibendum in,
suscipit vel, urna. Morbi sapien velit, condimentum ac, imperdiet sit amet,
volutpat a, arcu. Phasellus sed tortor varius purus sodales ullamcorper. Quisque
vitae odio ac nulla pharetra consequat. Aenean pretium, purus ac tincidunt
auctor, ipsum sem fermentum sem, sed scelerisque ipsum magna id leo. Aliquam
erat volutpat. Phasellus sodales justo id turpis. Nulla sodales orci egestas
augue. Duis auctor pellentesque velit. Nam rhoncus porttitor sapien. Nulla
ipsum nisl, lacinia nec, dignissim non, rutrum ac, ante. Cras lacinia, erat
non ullamcorper porttitor, ipsum urna hendrerit mauris, sit amet feugiat wisi
est nec libero. Nulla lobortis ultrices enim. Etiam varius, ante vel vestibulum
bibendum, metus purus dictum magna, eu bibendum mauris enim vitae purus.</p>
</div>
</body>
</html>