I need a cross browser drop down css menu like this
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 works well till this step.
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). I'd like a CSS solution, too.
Any link to a working example will be enough. Explanation on how to do/what to do will be much more appreciated.
(I need to have it cross browser compatible. IE 5.5, 6, 7; Firefox 2,3; Safari for Mac)