Css Trouble ul submenu displays weird in IE

[Lozbo 0]

I have asked for help in the css creator forum, but I haven't got an answer. Well some one actually posted something but didn't work, so I will post my trouble here to see if somebody can bring light... thanks in advance...

Menu in css, <ul> shows fine in the good browsers. I use the suckerfish dropdown js principle to have a vertical menu with a submenu poping out. I think I have some issues as to xhtml or css around all over the index, but the trouble I can't fix is the submenu acting weird in IE6 and it looks like in IE7 also.
When you hover over the main links of the menu in the left (the one called "principal" everything is fine, but when you go on the submenu, it disappears. If i remove (display:none) the div#main-content (the div next to it in the graphic layout) it works fine in IE6. I have added some z-index rules here and there, but it doesnt work though...

Try it in pruebas.lozbo.org/dd/ (with IE6) and you'll see what I mean. Hover "productos turísticos" and its submenu, and move the mouse along.

All js, css, and imgs are in a subdirectory named src (pruebas.lozbo.org/dd/src/)

[jlhaslip 4]

No Javascript in these: http://www.cssplay.co.uk/menus/

[truefusion 3]

I've always had trouble getting CSS menu hover effects to work in IE. I am always forced to use JavaScript to mess around with the CSS. But it solves the problem. It'd be easier to solve your problem if you provided some source coding.

[Lozbo 0]

Thanks jlhaslip, Ive tried those but i dont like the html in it... anyway Im not using those menus from Stu Nichols in this project... and the js is working, as it has always worked in past projects, its just something weird happening here...

Truefusion I hope you have read my post. It provides all the souce coding needed:

Try it in pruebas.lozbo.org/dd/ (with IE6) and you'll see what I mean. Hover "productos turísticos" and its submenu, and move the mouse along.
All js, css, and imgs are in a subdirectory named src (pruebas.lozbo.org/dd/src/)

[truefusion 3]

I checked your site in IE7, and the hover works, but if one condition is met: Slow mouse movement. Whenever i moved the mouse too quickly (which is basically as fast as i would normally move it), the sub-menus would disappear. If i move it slower than usual, it would work fine. Only way i can think of fixing this is by changing it to onclick, instead of hovering.

[Lozbo 0]

You mean onhover? I'd like to avoid these js events, as they are ilegal in strict xhtml, though I am using transitional, I'd like to keep to standards as much as posible, and using js events would guide me away from them... I can not replace css :hover with onHover events... Does any one know why is this happening? The submenu disappearing in IE6/7?

[jlhaslip 4]

Lozbo,We have had these discussions in the past regarding Javascript Menus on html pages. Approximately 20% of users turn it off, essentially eliminating the on:hover events, so CSS is a better way to go, in my opinion. :)And CSSPLAY has drop-down and flyout menus that are cross-browser and validate even using IE6/7.

[Lozbo 0]

I know, I am using a CSS menu, why dont you check it out? It's at pruebas.lozbo.org/dd/.I am not using on:hover events, I am using a "sucker down dropfish" kind of menu (from ALA) with some js to fix the hovering submenu on IE6.I dont like the xhtml of those pure css menus of Stu Nichols, I find it easier for people learning from the code to avoid having all that tricks of tables amidst the list, it seems too dirty for me.And what are your sources about people disabling javascript on their browsers? According to my experience, its not that high (but i dont have an official source though, so I'd like to know if you have any...).

Edited December 9, 2006 by Lozbo (see edit history)