tiger0516
asked on
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)
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)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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.
The only way to get CSS compatibility for older browsers is to include javascript.
ASKER
For example: http://www.cssplay.co.uk/menus/final_drop2.html does not have JavaScript.
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
ASKER
But I cannot find any working samples on the links you gave. Additionally, they use some JavaScript . I do not want any JavaScript.