I finally got my navigation drop down menu working!

I had been testing in Chrome, Firefox, and IE8. Before my celebration even really started, a user pointed out (correctly) that it doesn't work in IE7 :( The menus drop down on hover, but they aren't aligned, and you can't click on any of the menu items. Does anyone know why this would happen/how to fix it?



You can try this. IE doesn't understand :hover links it incorrectly uses :active instead so it's possible that by adding an active rule to the hover rule you might get your dropdowns to drop. So add the active rule after the hover one like this: div#menu ul li:hover ul, div#menu ul li:active ul {display: block;} It's the same way, if you have any other hover rules you need to add an active version afterwards. You never know, that might work. Let us know what happens (or doesn't).

If you're using CSS for anything except font colouring you absolutely must use a DOCTYPE - browser behaviour is very unpredictable without it. In your case, I'd go for this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Add that in before everything else right at the top of the page. With that in place all good browsers plus IE6 & 7 will be using "Standards" mode and will be much closer together in the way they show the page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.