drop down css menu help

How to overlap other elements?

[tntpower]

(cross browser compatible. IE 5.5, 6, 7; Firefox 2,3; Safari for Mac)

I need a drop down css menu like this

AAA BBB

CCC DDD

When hovering on AAA or BBB or CCC or DDD, there is a drop-down menu, for example, A1,A2,A3; B1,B2,B3; C1,C2,C3; D1,D2,D3, respectively --- My CSS menu works well till this step (copied some sample codes from a book).

What I have trouble is that when hovering on AAA, for example, the drop down list of A1,A2,A3 cannot overlap CCC. In other words, I get a drop down menu of A1,A2,A3, but whenever my mouse hovers on CCC, A1,A2,A3 are gone and I get C1,C2,C3. Additionally, if A2 and CCC are in the same position, I cannot see A2, only can see CCC.

I want A1,A2,A3 to be visible and CCC to be invisible when I hover on AAA (and when I hover on any sub menu item of AAA).

By the way, I use a Table to achieve the 2x2 layout (AAA,BBB,CCC,DDD). Too stupid, isn't? . I'd like a CSS solution, too.

Any link to a working example will be enough. Explanation on how/why to do will be much more appreciated.

Thanks,

[swa66]

I doubt there is going to be a CSS-only way to prevent you from triggering the :hover on overlapping elements all at the same time. Aside of avoiding the overlap in the first place.

Most likely some javascript to change the settings on the other elements while in the submenu of one will be possible, but even then it's not that trivial how it should act for the optimal user experience.

[BadBoyMcCoy]

eric meyer has a way of doin drop down menu's with pure css, but unfortunatly this won't work in IE, (and looks a bit weird in IE7 on my pc) So swa66 is right you will probably need some javascript. Son of suckerfish drop down maybe if your keen on using css.