CSS Rollovers/subMenu conflict

[Juparis]

I'm trying to develop a site with a navigation menu that does both of the following upon hovering:
1) Rolls the images, using CSS instead of JavaScript
2) Displays a subMenu, with more options...

My problem thus far is as follows:
With DIVs, I have basically everything set out the way I want it, but there remains an extra space between images when a subMenu is present. The subMenu itself also hides behind the image below, which has got me baffled..

I also tried using UL and LI's only, in hopes that it might be just as efficient. I haven't spent as much time on this coding than the other, since it was a recent suggestion, but the image rollovers don't work at all. Extra spaces are always there, and the subMenus (once again) hide behind the below image...

DIVs page (http://www.juparis.x3fusion.com/test.htm) (So close, and yet so far)
UL/LI only (http://www.juparis.x3fusion.com/testing.htm)

Thanks in advance to any suggestions!

[bathurst_guy]

i dont see the extra space.. im using FF
as for if the images go behind, have you specified your z-index?

[Kravvitz]

Take a look at these:
http://www.dynamicsitesolutions.com/css/background_image_switching/
http://www.dynamicsitesolutions.com/css/background_image_switching2/

http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.alistapart.com/articles/dropdowns/
http://www.alistapart.com/articles/horizdropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/hybrid/
http://www.csscreator.com/menu/multimenu.php
http://www.positioniseverything.net/css-flyout.html
http://www.positioniseverything.net/css-dropdowns.html

[Juparis]

I haven't been able to look at all those pages, but the extra space appears whenever you put your cursor over a link with a subMenu. Z-indexes were defined, yes, but the problem still persists.

Edit: After going through some of those posted links, I can say that I've looked at most of them, and my coding attempts are based off of several of them. Most are specefied for horizontal menus, when mine is a vertical one--a slightly harder version since there's no vertical space in a horizontal menu... Thanks for the attempt, though..

[Kravvitz]

Which extra space do you mean? Which browser do you see it in? IE6/Win? IE5.5/Win?

[Juparis]

Sorry for not explaining myself further...

To start off, I just gave up trying to get the overlapping look--setting the subMenus to the side is much more easier than trying to keep them above all the other images (this problem was only in IE).

With that out of the way, the only space I see is in IE 6.0/WinXP.. It looks perfect in Firefox and Opera (I wish I had tested those earlier). And just to clarify, this is on the first page I listed (here (http://www.juparis.x3fusion.com/test.htm)) since it's so close to completion..

Thanks again for all the help. When I get more time, I'll be sure to go through each of those links you previously posted with more than just a glance--hopefully one of them holds the secret to success if nobody here can find it..

[Juparis]

Solution Found

At long last, I found the solution to this extra space! I don't know why I hadn't thought of it sooner! It's so simple!

So, for future reference I added "overflow: hidden;" in the CSS files so that the divs would remain in their original defined height..