Previous Message
Next Message

Horizontal menu with gap between main and subitems: how to get it working in IE?

Sent by Danny Puype on 8 November 2006 14:02


This one has kept me busy for hours and hours now...
I'm looking for a way - as simple as possible - to bridge an obligatory
(design) gap between main and sub part of a menu (both horizontally
I got the menu to work in FF and Opera, by setting a specific height of 20
px for the 'main horizontal menu line' and adding bottom padding to the li
level triggering of the 'submenu horizontal line' (the hovering thus bridges
the gap - see comments in CSS file). 
For IE i'm using the wide spread suckerfish javascript solution, which
nicely triggers of the 'submenu horizontal line'.
However when hovering over the main menu line (only About us and Events
contain sub items) the construction breaks and the submenu vanishes... 

I've tried out loads of things and searched all over - some javascript
approaches, some with conditional comments and embedding the nested ul menu
in a table structure, layers, ...
I got 
I can't get this to work. 

Any suggestions of someone who did solve this in a simple and understandable
way, needless to say are more than welcome (I'm rather advanced in CSS, but
no IT'er, in love with CSS, but finding the solutions one has to sometimes
apply ... well rather 'complicated', not to say 'ridiculously complicated'

Menu: (About us and
Events trigger of subitems) - first look in FF for the desired result then
CSS: (navigation CSS
completely at the end)

Alternatives which do work in FF/IE/Opera, but which are not the envisaged
end result:

A big thanks in advance.

Danny Puype
Trainer & Developer

css-discuss [EMAIL-REMOVED]]
IE7 information --
List wiki/FAQ --
Supported by --
Previous Message
Next Message