Need a drop down css menu

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)
Who is Participating?
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
The best resource for this is the suckerfish article on A list apart:

also see son of suckerfish:
tiger0516Author Commented:

But I cannot find any working samples on the links you gave. Additionally, they use some JavaScript . I do not want any JavaScript.
RartemassAuthor, martial arts coach, IT ConsultantCommented:
The javascript is only included to make the menus work on IE 6.
The working example is a link near the bottom. Here is the direct link:

View the page source for the CSS and HTML code.

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

RartemassAuthor, martial arts coach, IT ConsultantCommented:
As IE isn't standards compliant CSS doesn't work correctly on IE6 or earlier. IE 7+ resolves some of the issues but not all.
The only way to get CSS compatibility for older browsers is to include javascript.
tiger0516Author Commented:
For example:  does not have JavaScript.
RartemassAuthor, martial arts coach, IT ConsultantCommented:
I had never seen CSS used that way before.
Thanks for the link.

I think we need to see your CSS and menu code so we can see where the issue is.
Please attach it.

scrathcyboyConnect With a Mentor Commented:
I disagree that pure CSS menus cannot be made to work on IE6 -- I have seen them work fine.  I know you will hate me giving you a general, but this is the BEST way to pick the one you like --
There are just too many varieties and individual links to give to be complete.  Good luck.
Jason C. LevineNo oneCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.