title: CSS Drop-Down Menu Not Working in IE9
body: <p>UPDATE: I am using Yahoo's SiteBuilder software and, since I suspect the problem may have to do with the doctype header, I did a Google search on that for SiteBuilder. Someone in another forum suggested adding the following to the questioner's website</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; 
  </code></pre>
  
  <p>I tried adding that to the top of my page's HTML. The drop-down menu worked in IE9, but in both IE and Firefox the text, log-in box, etc. were all jammed in the upper left corner of the screen. So it would appear to be something in the Doctype, but there's something else going on that's shifting everything out of place. Any suggestions based on this development?</p>
  
  <p>Thank you!</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the site: <a href="http://gardenstatelegacy.com/GSL2_Test_Home.html" rel="nofollow">http://gardenstatelegacy.com/GSL2_Test_Home.html</a></p>
  
  <p>This 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.</p>
  
  <p>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!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;   
    &lt;head&gt; 
     &lt;style type="text/css"&gt;      
          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;
          }
      &lt;/style&gt;                            
   &lt;/head&gt;
   &lt;body&gt;
     &lt;div id="wrap"&gt;
          &lt;ul class="navbar"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sample Issue&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://gardenstatelegacy.com/Subscribe.html"&gt;Subscribe&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;History Sites/Groups&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Speakers Bureau&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://gardenstatelegacy.com/Professional_Directory.html"&gt;Consultant Directory&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;         
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About GSL&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" &gt;Mission Statement&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;         
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;GSL Store&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Advertise&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
     &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>