Linkfomatierung

[awortmeier]

Hallo,
ich bekomm meine Link Fomatierung nicht hin, egal was ich mach es wird schlimmer.

Link
Ich möchte, dass der "obere" Text (Startseite, Profil, Referenzen...) weiß, groß und dick geschrieben ist und bei Hover blau, groß und dick werden.
Der "untere" Text (subscribe) soll grau, klein und normal sein und bei Hover weiß, klein und normal werden.

Irgendwie bekomm ich das einfach nicht hin...

HTML-Code:

<div class="menu">
		<div class="left">
			<ul>
				<li>
					<a href="#">
						<span>Startseite</span>
						<span class="subScribe">Aktuelle Themen</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Referenzen</span>
						<span class="subScribe">Meine Arbeiten</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Kontakt</span>
						<span class="subScribe">Schreiben Sie mir...</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Profil</span>
						<span class="subScribe">Wer bin ich?</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>Diverses</span>
						<span class="subScribe">&Uuml;briggebliebenes</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="image"></div>
	</div>

CSS-Code:

.menu span {
	display:				block;
}

.menu ul {
	border-bottom:			2px solid #4E4E4E;

	margin:					0px;
	margin-bottom:			10px;

	padding:				0px;

	background-color:		#FFFFFF;

	list-style:				none outside;
}

.menu li {
	border:					2px solid #4E4E4E;
	border-bottom:			0px;
}

.menu a {
	display:				block;

	padding:				5px;
	padding-left:			10px;

	font-size:				13px;
	font-weight:			bold;
}

.menu a:link, a:visited {
	color:					#0170B5;

	text-decoration:		none;
}

.menu a:hover, a:active {
	color:					#FFFFFF;

	background-color:		#0170B5;
}

.left {
	float:					left;

	width:					150px;
}

.subScribe {
	padding-left:			20px;
}

.subScribe a:link, a:visited {
	font-size:				11px;
	font-weight:			normal;

	color:					#4E4E4E;
}

.subScribe a:hover, a:active {
	color:					#FFFFFF;
}

.image {
	display:				block;

	float:					right;

	width:					450px;
	height:					200px;

	margin-top:				2px;
	margin-bottom:			2px;

	background-color:		#000000;
	background-image:		url(../images/meer.png);
	background-repeat:		no-repeat;
}

 

[Maik]

Hi,

die dazugehörigen Selektoren für Nachfahren lauten so:

.menu a .subScribe {
    font-size:              11px;
    font-weight:            normal;

    color:                  #4E4E4E;
}

.menu a .subScribe:hover, .menu a .subScribe:active {
    color:                  #FFFFFF;
}

mfg Maik