Bei Link:Hover ein Bild unter einem Text-Feld anzeigen

[hightime-fan]

Hi MacUsers,

hab folgendes Problem: ich habe eine Liste von Links die als Untermenü dient. Wenn der Link aktiv ist oder sich die Maus darüber befindet (hover) soll, unter dem jeweiligen Link ein weißer Hintergrund angezeigt werden. Dieser weiße Hintergrund soll bis rechts, ans Ende der dunkelgrauen Fläche reichen. Dies passiert jedoch nicht. In der Tat, wird der Hintergrund nur unter dem Text angezeigt. Habe es mit "width" angaben probiert, nur hilft da nichts..



HTML

 <div class="submenu">
        <a href="briefumschlaege.html" id="active">Briefumschläge</a><br>
        <a href="einladungen.html">Einladungen</a><br>
        <a href="tischkarten.html">Tischkarten</a><br>
        <a href="menus.html">Menüs</a><br>
        <a href="tischplaene.html">Tischpläne</a><br>
        <a href="tischnamen.html">Tischnamen</a><br>
        <a href="escortcards.html">Escort-Cards</a><br>
        <a href="dankeskarten.html"> Dankeskarten</a><br>
        <a href="namenskaertchen.html">Namenskärtchen</a><br>
        <a href="hochzeitseinladungen.html"> Hochzeitseinladungen</a><br>
        <a href="savethedatekarten.html">Save-the-Date-Karten</a><br>
        <a href="geburtsanzeigen.html">Geburtsanzeigen</a><br>
        <a href="taufanzeigen.html">Taufanzeigen</a><br>
        <a href="undvielesmehr.html">Und vieles mehr…</a>
    </div>

CSS

.submenu {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	position:fixed;
	margin-top:206px;
	margin-left: 22px;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 26px;
	text-decoration:none;
}

.submenu a:link{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 26px;
	text-decoration:none;
}

.submenu a:visited{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 26px;
	text-decoration:none;
}

.submenu a:hover{
	background-image: url(../images/submenu/submenu_empty.png);
	width: 100%;
	top: 0;
	left: 0;
	font-family:Arial, Helvetica, sans-serif;
	color:#7b5fa1;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 26px;
	text-decoration:none;
}

.submenu #active{
	background-image: url(../images/submenu/submenu_empty.png);
	font-family:Arial, Helvetica, sans-serif;
	color:#7b5fa1;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 26px;
	text-decoration:none;
}

Habt ihr eine Idee wie das gelöst werden könnte?

mfG, Hightime

 

[hightime-fan]

Hat denn niemand eine Lösung für mich?

 

[Zieger]

du solltest die menüpunkte in listen verwalten, dann klappts auch bis an den rand.

schau mal hier nach: http://www.web-toolbox.net/webtoolbox/menues/menue-bsp19/menue-19.htm

 

[hightime-fan]

Danke dir, hat perfekt geklappt!