CSS Textfarben Problem

SimStar001 · 06.01.2012, 04:30

Hallo, ich bin gerade dabei für meine neue Website ein Menü zu entwerfen, diesmal per CSS gestylet.

Hier der Link zum Testmenü: klick mich

Ich habe nun ein ganz banales Problem, und weiß einfach nicht woran es liegt.
Bewegt man die Maus z.B. auf Bildergallerie, so öffnet sich ein Untermenü. Soweit so gut.
Mein Problem liegt darin, das die Textfarbe der Untermenüpunkte orange ist. Diese sollte aber weiß sein und nur beim hover Event orange werden.
Beim hover Event kann ich jede belibige Farbe auswählen und diese wird angenommen, im Moment mal auf weiß gesetzt.

Testweise habe ich beim Untermenüpunkt Side Stick Area die Farbe mal manuell definiert statt per css. Und siehe da, der Text ist weiß wie gewünscht.

Wie kann ich das ganze jetzt in meinem CSS definieren?

hier mal mein CSS:

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:17px;
	font-weight:lighter;
	width: 800px;
	}
.menu ul{
	background:#505050;
	height:50px;
	list-style:none;
	margin:0;
	padding:0;
	border-top: 2px solid #828282;
	border-left: 2px solid #828282;
	border-right: 2px solid #828282;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	}

	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#505050 url("seperator.png") bottom right no-repeat;
		color:#FFFFFF;
		display:block;
		font-weight:normal;
		line-height:50px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2D2D2D url("pfeil_unten.png") bottom center no-repeat;
			color:#FFBE39;/* ist schon das orange*"10.12.2011*/
			text-decoration:none;
			-moz-border-radius:4px;
			}

/* Menu active */
.menu li active a{
		background:#505050 url("") bottom center no-repeat;
		color:#FFBE39;
		display:block;
		font-weight:normal;
		line-height:50px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;

		}

	.menu li ul{
		background:#505050;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		z-index:200;
		-moz-border-radius-topleft:0px;
		-moz-border-radius-topright:0px;
		-moz-border-radius-bottomleft:4px;
		-moz-border-radius-bottomright:4px;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		}
	.menu li li{
		background:url('seperator_unten.png') top left no-repeat;	
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		background-size:100% 1px;
		}
	.menu li:hover li a{
		background:none;
		
		}

	.menu li ul a{
		display:block;
		height:43px;
		font-size:14px;
		font-style:lighter;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2D2D2D url('pfeil_links.png') center left no-repeat;
			border:0px;
			text-decoration:none;
			color: #FFFFFF;
			}
	.menu p{
		clear:left;
		}

und hier die menu.html:

Code:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" href="menu.css" type="text/css" /></head>
	<body style="background:#000000">
	
	<div class="menu">
		<ul>
		  <li><a href="#" >Home</a></li>
		  <li><a href="#" >Download</a></li>		 
		  <li><a href="">Bildergallerie</a>
                <ul>
                <li><a href="#">MIP</a></li>
                <li><a href="#">FCU  / EFIS / Glare</a></li>
                <li><a href="#">Podestal</a></li>
                <li><a style="color:#FFFFFF"href="#">Sidestick Area</a></li>
                </ul>
          </li>

		   <li><active><a href="#" >Cockpit</a></active></li>
		</ul>		
	</div>	
	





	</body>

</html>

Ich habe jetzt schon alle möglichen Dinge ausprobiert, nur bekomm ich die Untermenüpunkte per CSS nicht in meiner gewünschten Farbe hin.

Weiß wer ne Lösung oder den Fehler in meinem CSS?

Vielen Dank!

LG Marco

K313 · 06.01.2012, 10:16

du hast im CSS falshe DOM-kette eingegeben von UL's und LI's.

nikosch · 06.01.2012, 14:59

Zitat:

.menu li active a

<active>

HTML kennt kein active-Tag. Benutze ein CSS-Klasse.

halskrause · 06.01.2012, 16:54

PHP-Code:

  #menu ul li ul li { color : #fff; }  /* oder #fff!important; */
#menu ul li ul li:hover { color : #FFBE39; }

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.01.2012, 10:16
K313 Benutzer Registriert seit: 18.12.2011 Beiträge: 37 PHP-Kenntnisse: Fortgeschritten	du hast im CSS falshe DOM-kette eingegeben von UL's und LI's.

06.01.2012, 16:54
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	PHP-Code: `#menu ul li ul li { color : #fff; } /* oder #fff!important; */ #menu ul li ul li:hover { color : #FFBE39; }`