title: dropdown navigation in IE hidden/not working
body: <p>Here's my css...wrote this a while back and it worked across IE/Firefox/Chrome perfectly and came back to it recently and now big surprise it won't show my dropdown navigations in IE. Help?</p>
  
  <p><a href="http://pastebin.com/smRU6Syb" rel="nofollow">http://pastebin.com/smRU6Syb</a> = html</p>
  
  <pre><code>/* ANYTHING UNDEFINED */
  *
  {
  margin:0px;
  border:none;
  }    
  
  /* CONTENT WRAPPER */ 
  #contentwrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom:50px;
  width: 800px;
  border:1px solid black;
  background-image:url('contentbg.png');
  }
  
   /* IMAGE GALLERY */
   div.img
   {
   margin:2px;
   margin-left:auto;
   float:left;
   text-align:center;
  }
  div.img img
  {
   display:inline;
  border:1px solid black;
   }
  div.img a:hover img
   {
   border:2px solid #0000ff;
   }
   div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:2px;
    }  /**** ^^^END IMG GALLERY^^^ ****/
  
  
  
   /* TITLE PANEL */
   #titlepane {
  background-color: white;
  background-image:url(badgesketch.jpg);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  width: 800px;
  \width: 800px /* IE9 */
   }
  /* LEFT ALIGN ANYTHING WITH LA ID'S */
  #la{
  text-align:left;
  }
  
  /* BODY TEXT AND CONTENT */
  #btext {
  margin-top:50px;
  min-height:500px;
  text-align:CENTER;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
  }
  
   /* NAVBAR DIV */
   #navbar {
   width:800px;
   \width:800px;
   }
  
   /* NAV ID'S */
   #nav {
  background-image:url('navbarbg.png');
  list-style: none;
  font-weight: bold;
  /* Clear floats */
  float: right;
  width: 760px;
  /width:800px;
  height:45px;
  /* Bring the nav above everything else--uncomment if needed.
   position:relative;
   z-index:5;
   */
       }
  
      /* NAV LI'S */
      #nav li {
  float: left;
  margin-right: 10px;
  position: relative;
  
         }
  
   /* TOP LINKS ACROSS THE NAVBAR (NON-DROPDOWNS) */
   #top {
   margin-top:7px;
   margin-bottom:7px;
   }
  
   /* FIRST NON-DROPDOWN LINK (CENTERING) */
   #first{
   margin-left:35px;
   /margin-left:73px;
   margin-top:7px;
   margin-bottom:7px;
   }
  
   /* FOOTER */
   #foot{
   text-align:center;
   border-top: 1px solid black;
   background-color:white;
   margin:0px;
   padding:10px;
   }
  
   /* LINKS WITH NAV ID'S */
   #nav a {
  display: block;
  padding: 5px;
  color: white;
  background: black;
  border: 1px solid white;
  text-decoration: none;
  text-align:center;
  z-index:400;
   }
  
   /* HOVERED LINKS WITH NAV ID'S */
   #nav a:hover {
  color: red;
  background: #000262;
  text-decoration: underline;
  
   }
   /* UL'S WITH NAV ID'S */
   #nav ul {
  background: black; /* Background color of the dropdown */
  background: rgba(255,255,255,0); /* Transparency of the Background*/
  list-style: none;
  position: absolute;
  left: -9999px; /* Hide the dropdown off-screen when not needed */
   }
  
   /* UL LI'S WITH NAV ID'S */
   #nav ul li {
  padding-top: 0px; /* spacing between the li's */
  float: none;
   }
  
   /* UL LINKS WITH NAV ID'S */
   #nav ul a {
  white-space: nowrap; /* No text wrapping keeps links on one line*/
   }
  
   /* HOVERED LI'S WITH NAV ID'S (DISPLAYING DROPDOWNS) */
   #nav li:hover ul { /* Display the dropdown on hover */
  left: -60px; /* Bring back on-screen when needed -60px is roughly centered */
   }
  
   /* HOVERED LI'S WITH NAV ID'S (TOP LINK HOVERED) */
   #nav li:hover a { /* Top link remains hovered */
  background: black;
  text-decoration: underline;
   }
  
   /* HOVERED LI'S WITH NAV ID'S (REMOVING EFFECTS) */
   #nav li:hover ul a { /* Remove effects */
  text-decoration: none;
   }
  
   /* HOVERING OVER DROPDOWN LI'S WITH NAV ID'S */
   #nav li:hover ul li a:hover { /* What happens when you hover over a dropdown link*/
  background:#000262;
   }
  </code></pre>
  
  <p>I tried changing z-indexes and that had no effect. Thank you for your help.</p>