✔ Problem mit Menübutton

[Philipp-]

Hallo liebe Community,

ich passe derzeit ein Design an, und nun bin ich soweit fertig. Mir ist aber aufgefallen, dass es ein Problem mit den Menübuttons gibt. Mit folgendem Code habe ich diese gemacht:

Zu aller erst mal den Link zur Live-Demo: http://clients.hingucker.info/nhcv/html/

CSS:

#mainMenu ul {
			margin:0;
			padding:0;
			height:23px; 
			margin-top:7px; 
			margin-left:20px;
			}
			
			#mainMenu ul li {
				float:left;
				list-style:none;
				padding:0 10px 0 0;
				margin:0 5px 0 5px;
				}
				
			#mainMenu ul li:hover{
				background:url(images/mainMenuHover.png) no-repeat right top;
				padding-right:10px;
				}
				
				#mainMenu ul li a {
					height:20px;
					padding:3px 0 0 10px;
					display:block;
					color:#fff;
					}				
				
				#mainMenu ul li a:hover {
					background:url(images/mainMenuHover.png) left top no-repeat;
					color:#022e38;				
					}

HTML:

 <div id="mainMenu">
        	<ul>
            	<li><a href="#"><span>Startseite</span></a></li>
                <li><a href="#"><span>Informationen</span></a></li>
                <li><a href="#"><span>Firma</span></a></li>
                <li><a href="#"><span>Ein riesiger Menübutton</span></a></li>
                <li><a href="#"><span>Startseite</span></a></li>
           	</ul>
        </div>

Nun, wenn man über den Link, also den "a" Bereich hinüber fährt (über die Schrift und links neben der Schrift) dann erscheit der ganze Button. Fährt man aber nun rechts der Schrift hinüber, so erscheint nur eine Rundung. Ich weiß dass es Irgendwie damit zusammenhängt, dass das a-Elemente rechts nicht ist, aber ich habe auch keine Ahnung wie ich das hinbekomme.

Würde mich echt sehr über eure Hilfe freuen.

Mit freundlichen Grüßen
Philipp

 

[Maik]

Hi,

das liegt mit der :hover-Pseudoklasse zusammen, die du auf das li- und a-Element anwendest.

Eine von beiden ist zuviel.

mfg Maik

 

[Philipp-]

Aber wenn ich eine der beiden Pseudoklassen entferne, dann funktioniert der Hover ja gleich garnicht. Das ganze soll ja nur beim Hover erscheinen, wenn man über den Link fährt.

Mit freundlichen Grüßen
Philipp

 

[Maik]

Dann mach es so:

#mainMenu ul li:hover{
                                background:url(images/mainMenuHover.png) no-repeat right top;
                                padding-right:10px;
                                }
#mainMenu ul li:hover a {
                                        background:url(images/mainMenuHover.png) left top no-repeat;
                                        color:#022e38;
                                        }

mfg Maik

 

[Philipp-]

Dankeschön, nun hab ichs kapiert. Danke

Mit freundlichen Grüßen
Philipp