Need a drop down css menu

I need a cross browser 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 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.

Thanks,

(I need to have it cross browser compatible. IE 5.5, 6, 7; Firefox 2,3; Safari for Mac)
LVL 1
tiger0516Asked:
Who is Participating?
 
RartemassConnect With a Mentor Service Desk AnalystCommented:
The best resource for this is the suckerfish article on A list apart:
http://alistapart.com/articles/dropdowns

also see son of suckerfish:
http://htmldog.com/articles/suckerfish/dropdowns/
0
 
tiger0516Author Commented:
Thanks.

But I cannot find any working samples on the links you gave. Additionally, they use some JavaScript . I do not want any JavaScript.
0
 
RartemassService Desk AnalystCommented:
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:
http://www.htmldog.com/articles/suckerfish/example/

View the page source for the CSS and HTML code.

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
RartemassService Desk AnalystCommented:
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.
0
 
tiger0516Author Commented:
For example: http://www.cssplay.co.uk/menus/final_drop2.html  does not have JavaScript.
0
 
RartemassService Desk AnalystCommented:
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.

0
 
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 --
http://www.google.com/search?num=30&q=pure+CSS+drop+down+menus+cross+browser
http://www.google.com/search?num=30&q=pure+CSS+drop+down+menus
There are just too many varieties and individual links to give to be complete.  Good luck.
0
 
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.
0
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.