unterschiedliche CSS für Links in zwei Fällen

[xtreAm]

Hallo,

ich stehe vor folgendem Problem:Ich habe ein Menü aufgebaut mit Hovereffekt. Per PHP wird der aktive Menüpunkt mit einem Hover hinterlegt. Wenn ein Menüpunkt aktiv ist, soll die Farbe der Schrift aber beim Hovern nicht mehr verändert werden. Wie ist dies möglich?

Hier der Code und ein paar Bilder zur Demonstration des Problems:

CSS Part:

li{
	float:left;
	color: #777;
	font-family:"Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light";
	font-size: 22px;
	margin-right: 40px;
	padding: 90px 7px 0px 7px;
	display:inline-block;
}
li a{
	color: #777;
	text-decoration:none;
}
li a:hover{
	color: #FF7300;
}
li.active{
	background: #FF7300;
	color:#FFF;
	height: 30px;
}

HTML Part:

<ul>
        	<li <?php if(isset($_GET['home'])) echo 'class="active"' ?> >
            	<a href="http://localhost/pd/index.php?home">Home</a></li>
            <li <?php if(isset($_GET['customer'])) echo 'class="active"' ?> >
            	<a href="http://localhost/pd/index.php?customer">Kunden</a></li>
            <li <?php if(isset($_GET['service'])) echo 'class="active"' ?> >
            	<a href="http://localhost/pd/index.php?service">Leistungen</a></li>
            <li <?php if(isset($_GET['profile'])) echo 'class="active"' ?> >
            	<a href="http://localhost/pd/index.php?profile">Profil</a></li>
            <li <?php if(isset($_GET['impressum'])) echo 'class="active"' ?> >
            	<a href="http://localhost/pd/index.php?impressum">Impressum</a></li>
        </ul>

falsch Menü: Home ist aktiv, Hover über Leistungen


richtig Menü: Home ist aktiv, Hover über Leistungen


Über Hilfe würde ich mich sehr freuen.

Grüße :)

 

[r-ene]

Ah, naja da wird zuerst das <li>-Tag formatiert. Danach hast du aber noch ein <a>-Tag, was dann weiter innen ist, also wird dessen Formatierung angenommen.
Bau deinen PHP-Code also in das <a>-Tag statt ins <li>-Tag rein und ändere dein CSS-Code in:

a.active{
	background: #FF7300;
	color:#FFF;
	height: 30px;
}

Edit: Eine einfachere Alternative wäre auch, wenn du die Klasse "li.active" einfach in "li.active a" oder ".active a" änderst.

 

[xtreAm]

Hab die Lösung. Danke rene, für die schnelle Antwort.

Sieht wie folgt aus:

li.active a{
	background: #FF7300;
	color:#FFF;
	height: 30px;
}