Grafiken bei Hover Effekt viel zu klein

[FunkFlex]

Hi,
ich hab ein Horizontales (Inline) Menü erstellt.
Funktioniert auch wunderbar.
Nur wenn ich jetz dem Hover Effekt, eine Hintergrundgrafik zuweisen will, wird diese zwar angezeigt, doch viel zu klein und nur zur hälfte.
Ich Kopier euch mal den Quelltext

	<ul id="menue">
    <li class="abstand"><a href="#">Punkt1</a></li>
    <li class="abstand"><a href="#">Punkt2</a></li>
    <li class="abstand"><a href="#">Punkt3</a></li>
    <li><a href="#">Punkt4</a></li>
    </ul>

hier das CSS:

ul#menue{
	margin-left:600px;
	position:relative;
	top:-25px;
}

ul#menue li{
	display:inline;
	list-style-type:none;
	color::#000;
}

ul#menue li a:link{
	text-decoration:none;
	font-size:14px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#000;
}

ul#menue li a:hover{
	text-decoration:none;
	background-image:url(navback.png);
	width:150px;
	
}
	
ul#menue .abstand{
	margin-right:20px;
	width:150px;
}

Kennt jemand den Fehler und kann mir helfen?
Das Bild wäre übrigens 150x30 Pixel Groß!
Vielen Dank Schonmal

Gruß FunkFlex

 

[threadi]

Ein Link ist ein Inline-Element und kann folglich keine Breite annehmen. Mach es zu einem Blockelement, dann klappt das auch.

display: block;

 

[FunkFlex]

Ja das komische is nur, wenn ich es als display:block; mache geht es 1. auch nicht und 2.Is es dann keine Horizontale Navigation mehr

 

[Maniac]

Floaten der Listenelementen.

float:left;

Noch dazu hast du einen Fehler bei "ul#menue li" bei color hast 2 Doppelpunkte.

Desweiteren müssen die Listenelemente beim floaten eine feste Größe und Breite haben.