Menu vises ikke korrekt i IE

Hej
Jeg har haft held med at lave en drop-down menu på min hjemmeside, men jeg har et lille problem med min menu.
Her er min CSS-fil

 body {
     background-image:url(images/background.gif);
     color: #000000;
     font-family: Arial, Helvetica, sans-serif, Verdana;
     font-size: 12px;
     margin: 0px;
     padding: 0px;
 }
 * {margin: 0px;padding: 0px;}
 .clear{clear:both;}
 #container {
     margin: 0px auto;
     text-align: left;
     width: 780px;
 }
 a {
     color: #000000;
     font-family: Arial, Helvetica, sans-serif, Verdana;
     font-size: 12px;
 }
 /********************** Header ***************************/
 #header {
     background-image:url(images/header.jpg);
     background-repeat:no-repeat;
     width:768px;
     height:262px;
 }
 #menu {
     position:relative;
     background-image:url(images/menu.jpg);
     background-repeat:no-repeat;
     width:768px;
     height:117px;
 }
 #menu ul{
     position:absolute;
     top:30px;
     left:265px;
     margin: 0;
     padding: 0;
     list-style: none;
 
 }
 #menu li{
     padding: 0 0 0 10px;
     display: inline;
     position: relative;
 }
 #menu li ul{
     padding-top: 5px;
     display: none;
     position: absolute;
     top: 30px;
     z-index: 999;
 }
 #menu li:hover ul{
     display: block;
     background-color: #000;
     opacity: 0.5;
     left: auto;
     top: auto;
     right: auto;
     bottom: auto;
 }
 #submenu ul li a, #submenu a:visited {
     text-align: center;
     margin-left: 5px;
     text-decoration: none;
     position: relative;
 }
 
 #menu a{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bolder;
     text-transform: uppercase;
     color: #d8cd8d;
     text-decoration: none;
 }
 #menu a:hover{
     color:#3e3c27;
 }
 h1,h2,h3,h4 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: bolder;
     text-transform: uppercase;
     color: #171508;
 }
 h1,h2 {
     position:absolute;
     top:94px;
 }
 h1 {
     left:241px;
 }
 h2 {
     right:75px;
 }
 h3 {
     margin: 15px 0px 0px 30px;
     border-bottom: solid 1px #625d3b;
 }
 h4 {
     margin: 15px 0px 0px 30px;
     font-size:16px;
     border-bottom: solid 1px #625d3b;
 }
 /********************** Main ***************************/
 #main {
     background-image:url(images/main_bg.gif);
     background-repeat: repeat-y;
     display:block;
     width:768px;
     height:auto;
 }
 #content {
     background-image:url(images/content_bg.gif);
     background-repeat: repeat-y;
     width:768px;
 }

I chrome, firefox, safari og opera virker den fint, ved at menuen kommer frem lige under det menupunkt den hører til, men i IE, både 8 og 9 kommer det frem på en ny linje.
Min menu er lavet således:

 <ul>
 <li><a href="index.php">Forside</a></li>
 <li><a href="nyheder.php">Nyheder</a></li>
 <li><a href="om.php">Om os</a></li>
 <li><a href="admins.php">Admins</a></li>
 <li><a href="servers.php">Servere</a>
 <ul>
 <li><a href="addons.php" id="submenu">Addons</a></li>
 <li><a href="stats.php" id="submenu">Stats</a></li>
 </ul>
 </li>
 <li><a href="forum.php">Forum</a></li>
 </ul>

Er der nogen der kan fortælle mig hvad jeg gør forkert?