Wischnutz: Hover bei Bildern, Hänger

Beitrag lesen

Hallo,

Also das Thema wurde schon oft behandelt und eigentlich habe ich das schon mal auf die Art gemacht wie ich es euch jetzt darlegen möchte, aber irgendwie hängts bei mir grad...

--------------------------------------------------------------------

CSS:

/* - Menü - */
#menu {
  background: #000;
  padding: 5px; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  margin: 0;
  text-align: center;
  color: #ab4804; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu li {
  font-size: 1.2em;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  border-left: 1px solid white; /* Ein optischer Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
}
#menu li a {
  color: white; /* Hier ist das mit der Linkfarbe genau so, sie soll weiß sein. */
  text-decoration: none;
}

#menu img {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Link Hover Effekte im Menü */

.Gilde span {
 display:   none;
}
.Gilde:link, .Gilde:visited {
 display:   inline;
 width:    74px;
 height:    30px;
 background:   url(../img/Buttons/Gilde_in.gif);
}
.Gilde:hover, .Gilde:active, .Gilde:focus {
 background-image: url(../img/Buttons/Gilde_on.gif);
}

--------------------------------------------------------------------
HTML:
<ul id="menu">
   <li><img src="img/Buttons/Home_in.gif"></li>
   <li><a href="#" class="Gilde"><span>Gilde</span></a></li>
</ul>

--------------------------------------------------------------------
Aber ich bekomme nur den Text Gilde den ich ja eigentlich nur für den Falle das keine Bilder angezeigt werden eingebaut habe.
Wie kommts? Was ist falsch?

Danke für eure Hilfe