[Solved] 3 levels pure CSS dropdown menu : IE is killing me !

The #logo and #photo divs are defined with absolute positionning. Indeed, when I drop those two divs, I can see my second and third menu items, so it’s not the hover anything stuff which is faulty.

Line: 204
Char: 26
Error: Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Code: 0

Error: Expected ’:’ but found ’size’. Declaration dropped.
Source File: http://ns20999.ovh.net/~gican/css/communs.css
Line: 146

Error: Unknown property ’backrgound-color’. Declaration dropped.
Source File: http://ns20999.ovh.net/~gican/css/communs.css
Line: 651

Error: Error in parsing value for property ’border-spacing’. Declaration dropped.
Source File: http://ns20999.ovh.net/~gican/css/communs.css
Line: 654

Error: Selector expected. Ruleset ignored due to bad selector.
Source File: http://ns20999.ovh.net/~gican/css/communs.css
Line: 682

Error  Line 267 column 7: end tag for "html" omitted, but OMITTAG NO was specified.

</body>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Thanks everyone for the help, much appreciated
I’ll use your input to give this a second look and report with (hopefully) the solution

Welcome to CSS menus, where nothing makes sense when it comes to IE. I would seriously advocate using an IE Conditional Comment and brute forcing IE into submission with an IE-only stylesheet. It’s likely a width-related problem and a double-margin bug and several other things.

This is not goint to help much probably, but if you want, you could ask stu for permission to use his menu in a commercial site and then use the flyout menu that is in wayfinder package.. It works on IE5.5, IE6, IE7, Firefox, Opera, Mozilla and Netscape (not sure about Mac IE, but you can test here) and is truly pure css.

So it’s a clash between the menu and the logo and the photo divs? I notice that the photo does some funky fadey thing. I’ve not looked how they work. Do your menu items still show if you have static images there?

EDIT: I’ve now seen that the fadey thing uses JS (which makes your insistence on pure CSS menu somewhat strange) and is far enough away from the menu not to affect the second-level. But your logo uses png. What happens if you use gif or jpg there?

Could it be a "cascading" effect due to this javascript error...which I get in IE only...

Line: 204
Char: 26
Error: Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Code: 0

or some of the errors in the CSS...

Or one of the 18 XHTML validation errors, (...) Hope that helps you sort it out...

As for my insistence to have a pure CSS menu, I don’t think it’s inconsistent with using js elsewhere. In this case the client asked for a slideshow and wanted nice transition effects. Flash was out of the question, but small js is nice : it’s not there yet but I will provide an alternate picture for those who have javascript off.

The reason why I want CSS menu is : it degrades well. A menu is too important a thing to be build using javascript, not to mention the search engine optimisation aspect. A slideshow hardly qualifies as being an essential element. That’s my reasonning there.

I can’t think the menu as being pure css if it needs csshover.htc ..

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>

    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->

    [+wf.wrapper+]

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

</li>

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}