Größe des Hintergrund des Hover beeinflussen

Hallo!

Ich bin neu hier im Forum und heiße Daniela Stöckl. Ich habe schon einige Webseiten erstellt -
rein mit HTML/CSS (also reine Handarbeit) und mit Wordpress und Typo3.

Ich habe nun das Problem, dass es mir nicht gelingt, die Größe des Hintergrunds des Hovers
zu beeinflussen. Beim Darüberfahren mit der Maus ist der Hintergrund immer genau so hoch bzw.
lang, so hoch und lang der Linktext ist: siehe http://typo3.p169546.webspaceconfig.de/index.php?id=12

Der Hintergrund des Hover soll allerdings genau so lang und hoch sein, wie der Hintergrund eines aktiven Menüpünktes.
Ich habe schon einiges probiert, jedoch mit dem Ergebnis, dass sich alles verschiebt oder zwischen den Farbbalken
Abstände entstehen. Irgendwie müsste man wahrscheinlich das a-Tag vorher anders festlegen, oder geht es auch anders?

Habt ihr Tipps, was man beachten muss, damit die Größe des Hovers beeinflusst werden kann?

Herzlichen Dank gleich mal im voraus! Der CSS-Code ist gleich unten angefügt.

Daniela Stöckl

Das zugehörige CSS für die Navigation lautet:

#navigation {
width: 960px;
height: 62px;
color: #fff;
float: left;
position: relative;
}

.navmain{
background: none repeat scroll 0 0 #00458A;
float: left;
padding: 0 0 0 3.5%;
padding: 0 0 0 4.8%;
position: absolute;
width: 96.5%;
width: 95.2%;
}

ul.navmain ul{
position: absolute;
}

ul.navmain a{
color: #fff;
text-decoration: none;
}

ul.navmain, ul.navmain ul {
list-style-type: none;
}

ul.navmain li {
float: left;
padding: 2px 8px 2px 8px;
font-size: 13px;
height: 17px;
line-height: 17px;
}

ul.navmain li a{
display: block;
font-weight:normal;
}

ul.navmain .current{
background-color: #f8ce70;
padding: 2px 8px 2px 8px;
}

ul.navmain li#menuitem11.active,
ul.navmain li#menuitem12.active,
ul.navmain li#menuitem13.active,
ul.navmain li#menuitem14.active {
background-color: #f8ce70;
}

/* HAUPTMENÜ HINTERGRÜNDE */

/* Hintergrund orange - hover styles */
ul.navmain li a:hover {
color: #f3a803;
background-color: #fff;
}

/* Hintergrund blau */
ul.navmain li#menuitem12.blue,
ul.navmain li#menuitem12.blue ul.navsub1{
background-color: #75ace4;
}
#menuitem19.current a,
#menuitem22.current a,
#menuitem23.current a,
#menuitem24.current a,
ul.navmain li#menuitem12.blue a:hover{
color: #00458a;
}

ul.navmain li.active-ebene2 a,
ul.navmain li.active li.current a{
color: #f3a803;
}

/* Hintergrund grün*/
ul.navmain li#menuitem12.green,
ul.navmain li#menuitem12.green ul.navsub1 {
background-color: #a1c970;

}

#menuitem20.current a,
ul.navmain li#menuitem12.green ul.navsub2 li a,
ul.navmain li#menuitem12.green a:hover{
color: #6eae22;
}

ul.navmain .green li.active-ebene2 a{
color: #6eae22;
}

/* Hintergrund lila*/
ul.navmain li#menuitem12.purple,
ul.navmain li#menuitem12.purple ul.navsub1{
background-color: #cf5ca7;
}
#menuitem21.current a,
ul.navmain li#menuitem12.purple ul.navsub2 li a,
ul.navmain li#menuitem12.purple a:hover{
color: #b20176;
}
ul.navmain .purple li.active-ebene2 a{
color: #b20176;
}

ul.navmain .navsub2 li.current a,ul.navmain .navsub2 li a:hover{
font-weight:bold;
background: none repeat scroll 0 0 transparent;
}

ul.navmain .navsub2 li.current,ul.navmain .navsub2 li a:hover {
background: none repeat scroll 0 0 transparent;
}

#menuitem19.current,
#menuitem20.current,
#menuitem21.current,
#menuitem22.current,
#menuitem23.current,
#menuitem24.current,
ul.navmain li.active-ebene2,
ul.navmain li.active li.current{
background-color: #fff;
}

.navsub1{
background: none repeat scroll 0 0 #F8CE70;
display: block;
left: 0;
margin-top: 2px;
padding: 0 0 0 3.5%;
padding: 0 0 0 4.8%;
width: 96.5%;
width: 95.2%;
}

ul.navsub1 li {
padding: 2px 8px 2px 8px;
}

ul.navsub1 li:hover > a{
background: #fff;
}

ul.navsub1 .current{
height: 17px;
line-height: 17px;
padding: 3px;
padding: 3px 8px 3px 8px;
}

.navsub2{
left: 0;
padding: 0.2em 0 0 3.5%;
padding: 0.2em 0 0 4.7%;
}

ul.navsub2 li {
color: #f3a700;
font-size: 11px;
float: left;
background-color: transparent;
padding: 0px 3px;
padding: 0px 8px 0px 8px;
}

ul.navsub2 a {
color: #f3a700;
}

ul.navsub2 li a:hover {
background-color: transparent;
}

ul.navsub2 li:hover > a {
background-color: transparent;
color: #F8CE70;
padding: 0;
line-height: 17px;
height: 17px;
}

ul.navsub2 .current {
background-color: transparent;
line-height: 17px;
height: 17px;
padding: 0px 3px;
padding: 0px 8px 0px 8px;
}

ul.navmain li.current a,
ul.navmain li.active a,
ul.navmain .navsub1 li.current a,
ul.navmain li.blue a,
ul.navmain li.green a,
ul.navmain li.blue a,
ul.navmain li.purple a,
ul.navmain .navsub1 li.active-ebene2 a,
ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li.current a,
ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li a:hover,
ul.navmain .navsub1 li.current ul.navsub2 li a:hover{
font-weight:bold;
}

ul.navmain .navsub1 li a,
ul.navmain .navsub1 li.current ul.navsub2 li a,
ul.navmain .navsub1 li.active-ebene2 ul.navsub2 li a{
font-weight:normal;
}

Hallo Sejuma,

danke für die rasche Antwort.
Gibt es auch eine Lösung, wo die Breite variabel ist, da die Linktexte ja unterschiedlich lang sind?
Ich habs bereits mit padding und margin an der gleichen Stelle probiert, jedoch verschiebt sich dann der orange Balken nach unten.

LG, DStoeckl

Ja wenn ich den width-Wert weglasse, ist der Hover genauso breit wie der Linktext.
Und genau das will ich nicht, er soll breiter und höher sein.

Hm, ich muss das Ganze genauer beschreiben:

Der aktive Menüpunkt hat ein padding eingestellt (Klasse current), das gleiche padding soll auch beim Hover
eingestellt werden. Wenn ich das mache, verschiebt sich beim Drüberfahren mit der Maus die gesamte Zeile
nach unten und es entsteht zwischen den Menüzeilen ein Leerraum. Was natürlich nicht so sein soll.

Ich hoffe, es gibt eine Lösung, ohne dass ich das Ganze wieder vollkommen umbauen muss. War so schon
Arbeit und Tüftelei. Ich hab schon viel herumprobiert, und das Ganz endete immer darin, dass sich alles verschoben hat.

Danke nochmals!

Daniela