title: html drop down menus not working in firefox and everything is wrong in older versions of IE
body: <p>Good evening everybody I am having trouble with my drop down menu's in firefox and IE.</p>
  
  <p>I mistakenly developed this page and tested everything on chrome but when a buddy was checking it for me he used firefox and said he was not able to use my navigation. Could somebody please point me in the right direction Thanks.</p>
  
  <p>And if anybody could point me in the right direction on getting my page to look good on IE that would be great</p>
  
  <p>here is the code</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"html"&gt;Register/login&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="register.php"&gt;Register&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="login.php"&gt;Login&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forgot Password&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Email Password&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Answer Security Questions&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;        
  </code></pre>
  
  <p>here is the css</p>
  
  <pre><code>nav {
      height:80px;
      width:1024px;
      }
  ul {
      padding:0;
      margin:0;
      list-style:none;
      }
  nav ul ul {
      display: none;
      }
  nav ul li:hover &gt; ul {
      display: block;
      }
  nav ul {
      background: #efefef; 
      background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
      background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
      background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
      padding: 0 75px;
      border-radius: 10px;  
      list-style: none;
      position: relative;
      display: inline-table;
      z-index:100;
      }
  nav ul:after {
      content: ""; clear: both; display: block;
      }
  li {
      float: left;
      }
  nav ul li:hover {
      background: #4b545f;
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
  nav ul li:hover a {
      color: #fff;
      }
  nav ul li a {
      display: block; padding: 25px 40px;
      color: #757575; text-decoration: none;
      }
  nav ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
      }
  nav ul ul li {
      float: none; 
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a;
      position: relative;
      }
  nav ul ul li a {
      padding: 15px 40px;
      color: #fff;
      }   
  nav ul ul li a:hover {
      background: #4b545f;}
  }
  nav ul ul ul {
      position: absolute; left: 100%; top:0;
      }
  li ul {
      display: none;
      position: absolute; 
      top: 1em;
      left: 0;
      }
  li &gt; ul {
      top: auto;
      left: auto;
      }
  li:hover ul, li.over ul{ display: block; }
  
  #article{
      height:500px;
      width:1024px;
      background:#FFFFFF;
      }
  #article&gt;h1 {
      text-align:center;
      }
  #legaljibjab {
      height:30px;
      width:1024px;
      border:black solid thin;
      background:#FFFFFF;
      }
  </code></pre>