Hi,
I'm working on a site that has a drop-down navigation bar on the top
of the screen (in a separate php file), but whenever the menu drops
down, the #header div expands over the body content. You can see what
I mean at bkaneweb.com/LICF . It works fine in Firefox, but I can't
seem to get it to work in IE. I've posted the code below: Any help
would be very much appreciated! Thanks!
CSS:
#header {
font: 9px verdana;
color: #CCCCCC;
width:100%;
border-bottom: 1px solid #DDD;
border-top: none;
font-weight: bold;
background: #F1F1F1;
height:138px;
overflow-y:visible;
float:left;
position:absolute;
}
/* CSS Tabs */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#header dl {
float:left;
width: 130px;
text-align:center;
}
#header dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:url(tabpinktop.gif);
height:25px;
margin: 1px;
}
#header dd {
display: none;
border: 1px solid gray;
}
#header li {
text-align: center;
background:url(tabpinklight.gif);
height:20px;
}
#header li a, #header dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#header dt a:hover, #header dt a:focus {
background: url(tabwhitetop.gif);
}
#header li a:hover, #header li a:focus {
background: url(tabwhitesmall.gif);
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
/* End of CSS Tabs */
<div id="header">
<dl>
<dt onmouseover="javascript:show();"><a href="/LICF/index.php"
title="Return to home">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu1');"><a href="/LICF/
candles.php">Candles</a></dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');"
onmouseout="javascript:show('');">
<ul>
<li><a href="/LICF/glass.php">Glass</a></li>
<li><a href="/LICF/traveltins.php">Travel Tins</a></li>
<li><a href="/LICF/votives.php">Votives</a></li>
<li><a href="/LICF/beeswax.php">Beeswax</a></li>
<li><a href="/LICF/fragrances.php">Fragrances</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu2');"><a href="/LICF/
diffusers.php">Reed Diffusers</a></dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');"
onmouseout="javascript:show('');">
<ul>
<li><a href="/LICF/fragrances.php">Fragrances</a></li>
<li><a href="/LICF/refilloils.php">Refill Oils</a></li>
<li><a href="/LICF/refillreeds.php">Bamboo Reeds</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu3');"><a href="/LICF/
index.php">Bath & Body</a></dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');"
onmouseout="javascript:show('');">
<ul>
<li><a href="/LICF/bodywash.php">Body Wash</a></li>
<li><a href="/LICF/moisturizers.php">Moisturizers</a></li>
<li><a href="/LICF/bathsalt.php">Bath Salt</a></li>
<li><a href="/LICF/sachets.php">Sachets</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu4');"><a href="/LICF/
misc.php">Miscellaneous</a></dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');"
onmouseout="javascript:show('');">
<ul>
<li><a href="/LICF/oils.php">2 Oz. Oils</a></li>
<li><a href="/LICF/oilburners.php">Oil Burners</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:show('smenu5');"
onmouseout="javascript:show('');"><a href="/LICF/gifts.php">Gifts</a></
dt>
<dd id="smenu5">
<ul>
<li><a href="/LICF/baskets.php">Gift Baskets</a></li>
<li><a href="/LICF/wedding.php">Wedding Favors</a></li>
</ul>
</dd>
</dl>
</div>
