There should be two items that drop down when you hover over Products.
I have used this code for a few other sites but never had this problem before.
Any help as always is greatly appreciated.
remove “left:-999em” and it will work fine in IE 6/7.
ul#nav li ul {
position: absolute;
width: 135px;
[COLOR="Red"]left: -999em; [/COLOR] [COLOR="Blue"]/*remove this */[/COLOR]
background-color: #0C4000 }
Vineet
hmm i tried doing that but now the dropdown is permanently “dropped”. Even when you aren’t hovering.
Hi,
You do not have a doctype on your page and IE is in quirks mode.
Also, a better method is to hide the the sub ul with a negative left margin instead of left position. Set the left position at zero at all times then bring it back into view with margin-left:0 on hover.
Set the relative position on the “li” after that so it becomes the containing block for the sub ul.
(Scroll all the way through the codebox)
[B]ul#nav[/B] {
z-index: 50;
margin: 0 0 1px 0;
padding: 0;
list-style: none;
[COLOR=Red]/*position: relative;*/[/COLOR]
width: 880px;
height: 38px;
line-height: 38px;
clear: both;
background: green url(../images/menubar.png) no-repeat;
padding-left: 2px
}
ul#nav ul {
padding: 0;
margin: 0;
list-style: none;
background: #FFF;
line-height: 20px;
}
ul#nav li {
[COLOR=Blue] float: left;[/COLOR]
[COLOR=Red]/*display: block;*/[/COLOR]
[COLOR=Blue] position: relative;[/COLOR]
padding: 0;
}
ul#nav li a {
padding: 0 16px;
display: block;
font: 16px/39px georgia, times, serif;
text-decoration: none;
color: #fff;
}
ul#nav li a:hover {
color: #fdc040;
background-color: #0C4000;
}
[B]ul#nav li ul [/B]{
position: absolute;
width: 135px;
[COLOR=Blue] left:0;
margin-left: -999em;[/COLOR]
background-color: #0C4000
}
ul#nav li li {
margin: 0;
padding: 0;
float: left;
}
ul#nav li li a {
background-image: none;
padding: 6px;
border-bottom: 1px solid #d2d2d2;
width: 123px;
display: block;
font-weight: normal;
color: #ffffff;
font: normal 14px georgia, times, Helvetica;
text-decoration: none;
}
ul#nav li li a:hover {
color: #fdc040;
background-color: #0e7300;
}
[B]ul#nav li:hover ul[/B] {
[COLOR=Blue]margin-left:0;[/COLOR]
cursor: pointer;
}
[B]ul#nav li:hover ul, #nav li.sfhover ul[/B] {
[COLOR=Blue] margin-left: 0;[/COLOR]
}
As far as the doctype I mentioned you will do just fine with HTML 4.01 Strict, It looks like you also need to get the sfhover script in place for IE6.
Here are both of those changes, move the script to it’s own file and link to it via CC for IE6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>TomBob Outdoors LLC. - Environmentally Friendly, Lead-Free Products for the Serious Outdoorsman</title>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
background-color: #895522;
background-image: url(images/logs.png);
background-repeat: repeat-x;
}
#pcm{display:none;}
</style>
<link href="tombob.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
You can also get rid of that .navcontainer div since it is not doing anything.
<td width="884" height="38" background="images/TomBob-HomePageConcept_15.png">
<ul id="nav"><!--@begin nav -->
<li><a id="home" href="index.php"><span>Home</span></a>
</li>
<li><a id="about" href="about.php"><span>About</span></a>
</li>
<li><a id="products" href="products.php"><span>Products</span></a>
<ul>
<li><a href="fishing-products.php"><span>Fishing Products</span></a></li>
<li><a href="hunting-products.php"><span>Hunting Products</span></a></li>
</ul>
</li>
<li><a id="news" href="news.php"><span>News</span></a>
</li>
<li><a id="links" href="links.php"><span>Links</span></a>
</li>
<li><a id="contact" href="contact.php"><span>Contact</span></a>
</li>
</ul><!--@end nav-->
</td>
The css I posted above works fine with both IE6/7 along with those html adjustments. 
Rayzur, as always thank you so much.
Was in meetings all day and have not yet had a chance to plug this in, but I will do so soon.
Thank you again.
Thanks Raymur!
Now for some reason we are getting a little 10px gap below the header and above phone number field.
My coworker is still using dreamweaver with tables and I am trying very hard to get him converted to css to avoid these types of issues
Probably just the whitespace left under images to allow for text nodes :). Can’t test since the college comptuers don’t have firebug.
img{vertical-align:bottom;}
woot!
Thanks Ryan!
You’re welcome :).