farbdefinitionen in verschachtelter liste

[Martin 0815]

hallo zusammen,

ich bin am verzweifeln und komme grad echt nicht mehr weiter. alles suchen half nichts. es geht um ein problem firefox <-> internet explorer. im ff läufts problemlos.

ich probiere mein menu (=verschachtelte,horizontale dargestellte liste) per css zu formatieren. die entsprechende liste erstelle ich dynamisch mit php. so sieht das ergebnis aus:

  
<div id="navcontainer">  
  <ul>  
    <li><a href="index.php">Startseite</a></li>  
    <li><a href="?site=seiteX.php">Testseite</a></li>  
    <li><a href="?site=seiteX.php" id="current">LinkX</a>  
      <ul>  
        <li><a href="?site=seiteX.php">LinkX</a></li>  
        <li><a href="?site=seiteX.php">LinkX</a></li>  
        <li><a href="?site=seiteX.php id="subcurrent"">LinkX</a></li>  
        <li><a href="?site=seiteX.php">LinkX</a></li>  
        <li><a href="?site=seiteX.php">LinkX</a></li>  
        <li><a href="?site=seiteX.php">LinkX</a></li>  
      </ul>  
    </li>  
    <li><a href="?site=seiteX.php">LinkX</a></li>  
    <li><a href="?site=seiteX.php">LinkX</a></li>  
    <li><a href="?seite=seiteX.php">LinkX</a></li>  
    <li><a href="?seite=seiteX.php">LinkX</a></li>  
    <li><a href="?seite=seiteX.php">LinkX</a></li>  
  </ul>  
</div>  

der (noch nicht fertige) css-code sieht folgendermaßen aus:

  
<!--  
#navcontainer { }  
#navcontainer a  
{  
text-decoration: none;  
}  
  
#navcontainer ul  
{  
padding: 0px;  
margin: 0px;  
list-style-type: none;  
position: relative;  
}  
  
#navcontainer ul li  
{  
display: inline;  
}  
  
/*1st level elements*/  
#navcontainer ul  
{  
background-color: darkred;  
font-size: 20px;  
border: 0px;  
padding: 0px;  
margin: 0px;  
}  
  
#navcontainer ul li  
{  
margin: 0px;  
}  
  
#navcontainer ul li a,  
#navcontainer ul li a:link,  
#navcontainer ul li a:visited  
{  
background-color: darkred;  
border-right: 1px solid black;  
color: white;  
padding: 0px;  
}  
  
#navcontainer ul li a:hover,  
#navcontainer ul li a:focus  
{  
border-right: 1px solid black;  
color: white;  
background-color: red;  
}  
  
/*current Link*/  
#navcontainer ul li a#current,  
#navcontainer ul li a#current:link,  
#navcontainer ul li a#current:visited  
{  
background-color: red;  
}  
  
/*Second and subsequent levels*/  
#navcontainer ul li ul  
{  
background-color: darkgrey;  /*FUNKT NICHT IM IE*/  
font-size: 14px;  
position: absolute;  
top: 21px;  
left: 0px;  
width: 100%;  
border-top: 1px solid black;  
}  
  
#navcontainer ul li ul li  
{  
display: inline;  
}  
  
#navcontainer ul li ul li a,  
#navcontainer ul li ul li a:link,  
#navcontainer ul li ul li a:visited  
{  
background-color: darkgrey;  /*FUNKT NICHT IM IE*/  
border: 0px;  
color: white;  
}  
  
#navcontainer ul li ul li a:hover,  
#navcontainer ul li ul li a:focus  
{  
color: white;  
background-color: grey; /*FUNKT NICHT IM IE*/  
}  
  
/*current Link*/  
#navcontainer ul li ul li a#subcurrent,  
#navcontainer ul li ul li a#subcurrent:link,  
#navcontainer ul li ul li a#subcurrent:visited  
{  
background-color: grey; /*FUNKT NICHT IM IE*/  
}  
-->  

das problem ist nun, dass der IE die background-color- und die a:hover-farbangaben in der zweiten menu-ebene einfach nicht darstellen will :-( hab rumprobiert aber er übernimmt immer die eigenschaften der ersten listen-ebene... woran liegt das? oder besser gesagt: was mache ich falsch? vielen dank!