CSS Drop-down navigation

[simonrl]

Hi

I'm hoping somebody can help me with this please.

I've built a new CSS based ul li /li /ul based nested navigation for my site which you can see here on a demo page:

http://www.aditnow.co.uk/error.htm

The idea is basic, if you move over a menu item that has a sub-menu (e.g. 'Browse Forum' under 'Mine Exploration Forum' a side menu (nested ul li list) pops out. If that has a sub-menu (e.g. 'UK Mine Exploration Forums') then another side menu (nested ul lu list) pops out again.

It works very well in Internet Explorer 7, Firefox and Safari, but in Internet Explorer 6, when you move over a menu item that has sub-menus the item below the menu item (i.e. the parent) bumps down about 12px. It's to do with the display: block switch on the over/hover class which I know because if I set the nested blocks to display: block by default then the same padding appears in Internet Explorer 6.

Probably easier to see it in practice than follow that description though

This is my first post here so I don't know if I'm supposed to post the CSS, but in case not it can be seen at:

http://www.aditnow.co.uk/css/1/styles2.css

With the relevant bit for the navigation starting fairly near the top after the /* navigation */ comment.

Any help very gratefully received.

Thanks,
Simon

[moojoo]

Use an IE conditional and an IE 6 specific style sheet to correct it. I would guess. I will look again when I have a bit more time.

[simonrl]

Thanks moojoo, appreciate it. I can't lock down what is causing the problem in IE 6 though, causing the white space to appear under the parent menu item, so at this stage wouldn't know what to tweak in a conditional stylesheet.

Thanks,
Simon

[moojoo]

Ok tested it in IE 6. I see what is happening..

try adding width:100%; to the LI's and see if that doesn't fix it. IE 6 has a old bug with adding space between LI's.

[shalom_m]

I had something similar a few month back.

Try defining height in your hovers.

[simonrl]

Originally Posted by moojoo

Ok tested it in IE 6. I see what is happening..

try adding width:100%; to the LI's and see if that doesn't fix it. IE 6 has a old bug with adding space between LI's.

Excellent thanks, that's nearly fixed it, it's now padding everything down a bit in both IE 6 and IE 7. But at least that suggests I'm getting closer to a fix. Thanks.

[simonrl]

With width: 100% on the li tags I've just noticed as well as the padding appearing in IE 7 as well as IE 6 you can't scroll all the way down to a sub-menu in IE6/7 without the sub-menu vanishing. Annoying, but it looks as though something is flawed with this menu and I either live with it not working in IE 6 or rebuild it entirely

Thanks everybody for the input.

[simonrl]

I've rebuilt it, and got it working correctly in Mozilla, Firefox, IE7 and Safari. But at the expense of removing the 1px white border-bottom from the li elements and of it working in IE6.

In IE6 the padding is back when you mouseover an li element that has 2nd or 3rd level sub-menu. If I put the 1px white border-bottom back in this padding disappears; but at the trade-off that the sub-menus vanish part way down in IE 7. I seem to be going round in circles, and have never had so many problems with a menu like this!