I will begin by stating up front that I am a complete newbie when it comes to this stuff. So please forgive me if I ask basic questions or need overly-explicit instructions.Basically, I want to add a drop-down navigation menu to my new website. I found code for one online and through some trial and error worked out how to make it my own. Everything seemed fine until I tested it on IE9. When I hover the pointer over it, the drop-down doesn't drop down. It works fine in Firefox (my primary browser) and a friend confirmed it worked on Chrome.Some Google searches later, I can see this is a fairly common problem. I've tried to find a workable solution, but either the suggested fixes didn't work or I don't really understand what they're talking about. As I said, I am a newbie struggling to understand this new language.Here is the site: http://gardenstatelegacy.com/GSL2_Test_Home.htmlThis is a work in progress. The "Subscribe" link works on both Firefox and IE9. The "Resources" tab should have the drop-down menu. The only link that is currently working in that drop-down list is the "Consultant Directory." I tried it using the "compatibility view" option in IE9, but it did not do anything.I am copying and pasting the code I am using below. If anyone can see why this isn't compatible with IE, please let me know and how I can fix it. Again, I'm new to this, so please make it simple. Thank you in advance for any help!\[code\]<!DOCTYPE html><html> <head> <style type="text/css"> body { padding: 0; margin: 0; } #wrap { width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #660000; } .navbar { height: 50px; padding: 0; margin: 0; position: absolute; border-right: 1px solid #660000; } .navbar li { height: 50px; width: 142px; float: left; text-align: center; list-style: none; font: normal bold 12px/1.2em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #660000; } .navbar a { padding: 18px 0; border-left: 1px solid #C4BD97; border-right: 1px solid #C4BD97; text-decoration: none; color: white; display: block; } .navbar li:hover, a:hover { background-color: #660000; } .navbar li ul { display: none; height: 50px; margin: 0; padding: 0; } .navbar li:hover ul { display: block; } .navbar li ul li { background-color: #660000; } .navbar li ul li a { border-left: 1px solid #C4BD97; border-right: 1px solid #C4BD97; border-top: 1px solid #C4BD97; border-bottom: 1px solid #C4BD97; } .navbar li ul li a:hover { background-color: #660000; } </style> </head> <body> <div id="wrap"> <ul class="navbar"> <li><a href="http://stackoverflow.com/questions/15754726/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Sample Issue</a></li> <li><a href="http://gardenstatelegacy.com/Subscribe.html">Subscribe</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Resources</a> <ul> <li><a href="http://stackoverflow.com/questions/15754726/#">History Sites/Groups</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Speakers Bureau</a></li> <li><a href="http://gardenstatelegacy.com/Professional_Directory.html">Consultant Directory</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Links</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15754726/#">About GSL</a> <ul> <li><a href="http://stackoverflow.com/questions/15754726/#" >Mission Statement</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Who We Are</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">News</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15754726/#">GSL Store</a></li> <li><a href="http://stackoverflow.com/questions/15754726/#">Advertise</a></li> </ul> </div> </body></html>\[/code\]
CSS Drop-Down Menu Not Working in IE9
- Thread starter raix
- Start date