Solved

Need a drop down css menu

Posted on 2008-10-07
9
280 Views
Last Modified: 2011-12-28
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)
0
Comment
Question by:tiger0516
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 18

Accepted Solution

by:
Rartemass earned 250 total points
ID: 22664822
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
 
LVL 1

Author Comment

by:tiger0516
ID: 22664850
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
 
LVL 18

Expert Comment

by:Rartemass
ID: 22664886
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Rartemass
ID: 22664896
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
 
LVL 1

Author Comment

by:tiger0516
ID: 22664995
For example: http://www.cssplay.co.uk/menus/final_drop2.html  does not have JavaScript.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 22665055
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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 250 total points
ID: 22665443
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37343920
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question