Hello there, I have a website running with a suckerfish ddmenu and it has no issues. Although the secondary navigation drops horizontally. I have a new one that drops vertically and only in IE 8 (not in compatibility mode though) the list disappears after hovering the first couple of items. I have gone through my code so many times, and through the one that works, and I don’t see whats wrong. The page is not life but here is the code:
}
.nav li:hover ul, .nav li.sfhover ul {
left:auto;
}
.nav ul li {
float:left;
}
.nav ul a {
dislay:block;
padding-bottom:3px;
}
.nav ul li a:hover {
background-color:#21122f;
}
Hi,
The problem with IE (in IE6/7) is that the sub ul needs a background of some sort on it to keep the anchors from falling through. It can ba a BG color or fake image, just needs something.
I would suggest a couple of changes to your hide/show method on the sub UL also. Rather than using left:auto, to show the sub UL use margins instead. IE7 can choke on left:auto sometimes since it has to guess where to place it.
You should really be setting position:relative on the main LI so it will be the containing block for the AP’d dropdown.
Oh, I also adjusted the line-height on the sub UL anchor, that will help when they wrap to another line. Some other things were added as well, just look through the code as I made some comments in it.
<!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>Demo Layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
}
ul.nav, .nav ul{
margin:0;
padding:0;
list-style:none;
font-size:0.8em;
}
ul.nav {
height:3em;/* set a height for full width BG color (fake float containment)*/
width:100%;
background:#333 url(../images/purple-bg.png) repeat-x;
}
ul.nav li {
float:left;
position:relative;
background:#333;/*testing*/
}
ul.nav a {
float:left; /*set haslayout for IE6/7*/
line-height:3em;
padding:0 3em;
text-decoration:none;
color:#c3a1f0;
font-weight:bold;
}
.nav li:hover {
background:#000;/*testing*/
}
.nav li:hover a {
color:#FFF;/*#150b1d;*/
/*background: url(../images/brightness.png)no-repeat center;*/
}
ul.nav li ul {
width:15em;
position:absolute;
top:3.6em;
left:0;
margin-left:-999em;
background: #fff url(foo.jpg); /*IE6/7 need some sort of BG to prevent anchors from falling through*/
}
.nav li:hover ul, .nav li.sfhover ul {
margin-left:0; /*show dropdown on hover*/
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
.nav li li a {
width:11em; /*now set a width for IE6/7 (total 15em with padding)*/
padding:.5em 2em;
line-height:1.2;/*reset line-height and use top/bot paddings*/
}
.nav li:hover li a {
color:#c3a1f0;
}
.nav li li a:hover {
background-color:#21122f;
color:#FFF;/*testing*/
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Directorio</a>
<ul>
<li><a href="comidarapida.html" title="Comida Rapida" >Comida Rapida</a></li>
<li><a href="#" title="Estetica & Belleza">Estetica & Belleza</a></li>
<li><a href="#" title="Proveedores & Servicios">Proveedores & Servicios</a></li>
<li><a href="#" title="Modas & Accesorios">Modas & Accesorios </a></li>
<li><a href="#" title="Restaurantes & Copas">Restaurantes & Copas</a></li>
</ul>
</li>
<li><a href="#">Nuestra Empresa</a></li>
<li><a href="#">Contactanos</a></li>
<li><a href="#">Mapa del Sitio</a></li>
</ul>
</body>
</html>
Thank you for your neat help.
I did notice that it was the background change that absolutely cause the problem.
And to be specific it is ONLY IE8 that presents the problem. I through it with the first site, and now with all the changes to the code I notice that is definitely changes to the bg color/image that makes the problem stop.
Thanks for the rest of the advice and the use of the margin makes more sense.
I hope to stumble upon you again in the future.
And to be specific it is ONLY IE8 that presents the problem.
I don’t know what doctype you were using. If it is an incomplete doctype (missing referring url) it will throw all versions of IE into quirks mode.
I didn’t see any problems in IE8 before I applied the BG fix to the sub UL. That’s because I set up my own doctype though since you did not have one in your first post.
I suspect that may have been part of the problem.
Working with the code above here is a test below that shows the problem in IE7 only while working fine in IE8. I have removed the BG color from the anchor and LI. A lot of times you want to use li:hover so the BG color is highlighted on the main LI as you go through the sub UL.
If you enable either of the two BG colors below in red then IE7 will work too.
<!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>Demo Layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
}
ul.nav, .nav ul {
margin:0;
padding:0;
list-style:none;
}
ul.nav {
height:3em;
font-size: 0.8em;
width:100%;
[COLOR=Blue]background:#444;[/COLOR]
}
ul.nav li {
float:left;
position:relative;
[COLOR=Red]/*background:#444;*/[/COLOR]
}
ul.nav a {
float:left;
padding:0 3em;
text-decoration:none;
color:#c3a1f0;
font:bold 1em/3em arial;
}
.nav li:hover {
[COLOR=Blue]background:#000;[/COLOR]/*testing*/
}
.nav li:hover a {
color:#FFF;/*#150b1d;*/
}
/*=== Dropdown Rules ===*/
ul.nav ul {
width:15em;
position:absolute;
top:3em;
left:0;
margin-left:-999em;
[COLOR=Red]/*background: #fff url(foo.jpg); /*IE6/7 need some sort of BG*/[/COLOR]
}
.nav li:hover ul,
.nav li.sfhover ul {
margin-left:0; /*show dropdown on hover*/
visibility:visible;/*fixes IE7 sticking dropdown */
}
.nav li li a {
width:11em; /*now set a width for floated anchor (total 15em with padding)*/
padding:.5em 2em;
font:bold .8em/1.2 arial;/*resets from parent and using top/bot paddings*/
}
.nav li:hover li a {
color:#c3a1f0;
}
.nav li li a:hover {
[COLOR=Blue]background:#21122f;[/COLOR]
color:#FFF;/*testing*/
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Directorio</a>
<ul>
<li><a href="comidarapida.html" title="Comida Rapida" >Comida Rapida</a></li>
<li><a href="#" title="Estetica & Belleza">Estetica & Belleza</a></li>
<li><a href="#" title="Proveedores & Servicios">Proveedores & Servicios</a></li>
<li><a href="#" title="Modas & Accesorios">Modas & Accesorios </a></li>
<li><a href="#" title="Restaurantes & Copas">Restaurantes & Copas</a></li>
</ul>
</li>
<li><a href="#">Nuestra Empresa</a></li>
<li><a href="#">Contactanos</a></li>
<li><a href="#">Mapa del Sitio</a></li>
</ul>
</body>
</html>