simpel CSS menu werkt niet:S

[turbojohn]

Hoi,

Ik wilde een idee maken zoals het menu links van beslist.nl.
Nu dacht ik heel simpel en snel het volgende te gebruiken:

#westbar {
	float: left;
	width: 125px;
	height: 300px;
	margin-top: 10px;
	margin-left: 10px;
	padding-right: 15px;
	line-height: 50px;
	text-align: right;
	color: #CC00CC;
	font-size: 15pt;
	border-bottom: 2px groove #CCCCCC;
}
#westbar a:hover {
	background-image: url('images/westbar/menu_background.png');
	display: block;
	width: 125px;
	}

Het menu zelf is wel goed, maar als ik over de link in de westbar gaat schuift de tekst naar rechts en komt springt de link eronder 50px (grootte van tekstregel) naar beneden.
Hoe kan ik ervoor zorgen dat het achtergrondplaatje bij het hooven van een link netjes achter de link komt en dat rechts het plaatje óver de borderrand schuift (openingseffect)?
Mijn achtergrondplaatje is een rechthoek waarbij rechts geen rand zit.

Sorry dat ik geen 'live-beeld' heb, de site draait nog op mijn homeserver.

Groetjes en alvast bedankt voor de moeite:thumb:

 

[Goeroeboeroe]

Het is zo inderdaad wat lastig te zeggen, maar ik zie al wel één ding dat problemen geeft. Met wat geluk is dat het.
'n Link (<a>) is 'n inline-element en heeft niet meer ruimte dan nodig is om de tekst e.d. erin weer te geven.
In je css staat dat de <a> in #westbar bij hoveren in 'n blok-element moet veranderen en 125 px breed moet worden. Dan is hij dus opeens breder dan eerst. En mogelijk ook hoger door het veranderen in 'n blok-element.

Je zou kunnen proberen de <a> altijd 'n blok-element te laten zijn met 'n bepaalde hoogte en breedte. Tijdens het hoveren kun je dan de achtergrond-afbeelding zichtbaar maken en eventueel hoogte en/of breedte veranderen.