<li> hovern

[aJunkie]

Hallo Forum,

danke erstmal für Eure bisherigen Antworten.

Ich baue gerade noch eine Homepage, scheiter aber beim Hovereffekt.
Alle Hovers funktionieren, bis auf eines.

Erstmal die CSS:

body{
    padding:0;
    margin:0;
    color:#ffff00;
    font-family: verdana, tahoma, sans-serif;
    font-size: 76%;
    background-color: #ffff00;
    background-image: none;
    background-repeat: no-repeat;
}

a{
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}

a:hover{
background-color:inherit;
color:#303030;
}

h1{
    margin:0;
    font-size:3.6em;
    letter-spacing:-3px;
    text-align:right;
    background-color:inherit;
    color:#000000;
}

h2{
margin:5px 0 10px 0;
font-size:1.6em;
letter-spacing:-1px;
font-weight:normal;
}

p{
margin:0 0 15px 0;
line-height:1.3em;
}

img{
float:left;
margin:0 10px 8px 0;
}

#title{
    width:700px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: -4px;
    margin-left: auto;
}

#container{
    margin:0 auto 15px auto;
    width:1000px;
    padding:10px;
    background:#ffffff url(front.png) bottom left no-repeat;
    color:#000000;
    border:20px solid #000000;
}

#sidebar{
    float:left;
    width:120px;
    padding-left:170px;
}

#main{
    width:785px;
    float:right;
}

#footer{
clear:both;
}

#menu {
width: 100%;
background: #ffffff;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
} 
    
    /*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;

}

/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 140px;
list-style-type: none;
} 

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #000000;
background: #ffff00;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: #ffff00;
border: 1px solid #000000;
color: #000000;
}

.menu:hover{
background-color:#ffff00;
color:#ffffff;
border:1px solid #000000;
}

/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
} 

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
} 

/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/

* html #menu ul li {
float: left;
width: 100%;
}

/*--nur für IE 7 erkennbar--*/

*+ html #menu ul li {
float: left;
width: 100%;
} 

/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
} 

/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000000;
border: 1px solid #000000;
background: #ffff00;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
color: #0f598d;
background: #ffffff;
border: 1px solid #000000;
}


.credits{
margin-bottom:0;
font-size:0.8em;
background-color:inherit;
color:#aaaaaa;
}

.credits a{
background-color:inherit;
color:#aaaaaa;
}

.small{
font-size:0.8em;
}

.center{
text-align:center;
}

Ich wollte, dass die Links im <li>, also die im Dropdown Menü hovern, wenn ich mir der Maus draufgehe. Die Farbe ist so okay. Nur es hovert nicht.

Habe ich etwas übersehen?

Edit:
Hier noch mein Menü-Schnipsel:

<div id="container">

<div id="menu"><!-- öffnet die Navigationsleiste-->
   <ul><!-- öffnet den ersten Themenblock -->
      <li><!-- öffnet die Listeneinträge von Thema 1 -->
         <h3>Thema 1</h3>
            <ul><!-- öffnet die Klappnavi von Thema 1 -->
               <li><a href="#">Thema 1.1</a></li>
               <li><a href="#">Thema 1.2</a></li>
               <li><a href="#">Thema 1.3</a></li>
            </ul><!-- schließt die Klappnavi von Thema 1 -->
         </li>
      <!-- schließt die Listeneinträge von Thema 1 -->
   </ul><!--schließt den ersten Themenblock-->
      <ul><!-- öffnet den ersten Themenblock -->
      <li><!-- öffnet die Listeneinträge von Thema 1 -->
      
         <h3>Thema 2</h3>
            <ul><!-- öffnet die Klappnavi von Thema 2 -->
               <li><a href="#">Thema 2.1</a></li>
               <li><a href="#">Thema 2.2</a></li>
               <li><a href="#">Thema 2.3</a></li>
            </ul><!-- schließt die Klappnavi von Thema 2 -->
         </li>
      <!-- schließt die Listeneinträge von Thema 1 -->
   </ul><!--schließt den ersten Themenblock-->
   
   
   <ul><!-- öffnet den dritten Themenblock -->

<li><a class="direkt" href="#">Thema 3</a></li>

</ul><!--schließt den dritten Themenblock-->
   
   
</div><!-- schließt die Menüleiste #menu -->

<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->

 

[prm]

In welchem Browser funktioniert das nicht?
Bei mir geht's (IE 7).
Falls IE 6: hast du die Datei csshover3-source.htc eingebunden/hochgeladen?

Edit:
Der Fehler liegt hier:

.menu:hover{
background-color:#ffff00;
color:#ffffff;
border:1px solid #000000;
}

Richtig wäre:
#menu a:hover{

 

[aJunkie]

Super! Danke. Da hätte ich noch ein paar Stunden gesucht.