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,