CSS Dropdown menu help

Question

Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :

http://deltaassocc.web704.discountasp.net/temp/page-works.html

but not here:

http://deltaassocc.web704.discountasp.net/temp/page.html

This has been driving me crazy! I'm using Firefox 3.0.10. Please help..

Answer 1

Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.

Install web developer toolbar and outline box elements, you will see that.

Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.

Answer 2

There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).

Alternatively you can use a Javascript based solution like superfish as suggested here.

Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.

Answer 3

The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.