Forum Moderators: phranque
I've created a multi-level drop down menu using "Son of Suckerfish" which works a treat in IE6 and Opera 8.5 on PC.
But when I view it in Netscape V8 and Firefox (both on PC) the first item in the menu moves up slightly, and the rest of the menu shifts along to the left, but displays as it should.
Absolutely everything else in the menu works perfectly, I've been trying to solve this for 3 days now, so if anyone could help I'd be very happy. :)
Does anyone have experience with this and could point me in the right direction. Or maybe particular traits that Firefox might be displaying, that I've not thought of.
I was expecting to get problems in Opera, and am a bit bemused. Am passionate about css and standards, but am still in the early days of learning.
Cheers Wild Rose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#header {
background-image: url(../images/cd_logo_3d.gif);
background-repeat: no-repeat;
background-position: 0px 20px;
margin: 0px;
padding: 0px;
height: 120px;
}
#content {
background-color: #DADFE8;
border-top: 10px solid #8FA4B6;
margin: 0px;
padding: 0px 0px 40px 0px;
text-align: left;
height: auto;
width: 770px;
}
a {
color: #0065A6;
text-decoration: none;
}
p {
margin: 10px 0px 10px 40px;
text-align: justify;
}
h1 {
margin: 40px;
padding: 0px;
text-transform: uppercase;
font-size: 1.5em;
}
p, h1, h2{
width: 540px;
padding: 0px;
}
/* menu */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 126px;
}
#nav li { float: left; }
#nav li ul {
position: absolute;
width: 126px;
left: -999em;
}
#nav li:hover ul { left: auto; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
#nav li ul ul { margin: -20px 0 0 126px; }
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li {
line-height: 20px;
width: 126px;
border: 1px gray solid;
border: solid 1px gray;
border-bottom: none;
border-top: none;
}
* html #nav li ul ul { margin-left: 64px; }
* html #nav li ul { margin-left: -64px; }
* html #nav ul { margin-left: -90px; }
#nav ul { background-color: White; }
#nav li ul { background-color: #ffffff; }
#nav {
font-size: 0.9em;
text-transform: uppercase;
height: 20px;
margin: 20px 0px 0px 0px;
width: 770px;
voice-family: "\";}\"";
voice-family:inherit;
height: 40px;
}
#nav ul {
border: solid 1px gray;
border-left: none;
}
#nav li {
border-left: 1px solid gray;
display: inline;
}
#nav .border { border: 1px solid gray; }
#nav .arrow #nav a:hover, #nav .arrow {
background-image: url(../images/arrow.gif);
background-position: right;
background-repeat: no-repeat;
}
#nav a {
color: black;
display: block;
}
#nav a:hover {
color: #000000;
background-color: #8FA4B6;
}
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
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>
</head>
<body>
<a id="pagetop" name="pagetop" />
<div id="wrapper">
<div id="header">
</div>
<ul id="nav">
<li class="border">
<a href="#">Home</a>
</li>
<li class="border">
<a href="#">News</a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
<li class="border">
<a href="#">Services</a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
<li class="border">
<a href="#">Products</a>
<ul>
<li>
<a href="#">Products >></a>
<ul>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">products</a>
</li>
</ul>
</li>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
<li>
<a href="#">products >></a>
<ul>
<li>
<a href="#">Laboratory</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="border">
<a href="#">About Us</a>
<ul>
<li>
<a href="#">menu one</a>
</li>
<li>
<a href="#">menu two</a>
</li>
</ul>
</li>
<li class="border">
<a href="#">Contact Us</a>
</li>
</ul>
<div id="content">
<h1>
Lorem ipsum
</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse sed dui. Nam non risus. Praesent est purus, volutpat
et, pharetra eget, dignissim sed, dui. Morbi sit amet erat
varius orci elementum bibendum. Mauris posuere placerat erat.
Phasellus elit est, tempus malesuada, pharetra in, pellentesque
ac, augue. Donec malesuada tempor ligula. Aenean justo augue,
consectetuer nec, suscipit non, semper ac, arcu. Integer velit.
Nulla ut urna. Donec lacinia, felis vitae euismod hendrerit,
ligula orci auctor lacus, a imperdiet libero felis interdum
tortor. Vestibulum a nisi. Vestibulum at pede eget justo
consectetuer lacinia. Aliquam pharetra lorem. Duis eu magna non
ipsum ultrices gravida. Proin tellus. Nam eget ligula. Ut quis
ipsum. Duis ac purus.
</p>
</div>
</div>
</body>
</html>
Now I'm really stumped! Off to scratch my head...
Instead of:
<ul>
<li>
<a href="">option</a>
</li>
</ul>
Try:
<ul><li><a href="">option</a></li></ul>
It may also have to do with you nav li:hover CSS along with the extra white spce.
It worked, and like you said - it did sound weird!
All I have to say is, stupid IE.
