Hi,
zunächst solltest du das Submenü regelkonform verschachteln, denn das
ul-Element darf als Nachfahre lediglich das
li-Element enthalten, aber wiederum selbst ein Nachkomme des
li-Elements sein - also:
Code:
<ul>
<li><a href="#">Studiengang</a>
<ul>
<li><a href="#">Überblick</a></li>
<li><a href="#">Philosophie</a></li>
<li><a href="#">Ziele</a></li>
<li><a href="#">Inhalte</a></li>
<li><a href="#">Projekte</a></li>
</ul>
</li><!-- Ende "Studiengang" -->
<li><a href="#">Bachelor</a></li>
<li><a href="#">Master</a></li>
...
</ul>
Ansonsten lautet hier die Fehlermeldung des w3c-Validators:
Line 31, Column 3: document type does not allow element "UL" here; assuming missing "LI" start-tag
Im zweiten Schritt wird für die Links der zweiten Menüebene das verwendete Hintergrundbild aus der ersten Menüebene "deaktiviert" - also:
Code:
#Huelle-Navi ul ul li a {
font-weight: bold;
font-size: 12px;
padding-top: 5px;
text-align: right;
border-bottom: 1px dashed #667e8b;
margin-left:70px;
color: #FFFFFF;
display: block;
background: none; /* "transparent" wäre auch möglich */
}
#Huelle-Navi ul ul li a:hover {
font-weight: bold;
font-size: 12px;
padding-top: 5px;
text-align: right;
border-bottom: 1px dashed #667e8b;
margin-left:70px;
text-decoration: none;
color: #8cca42;
background: none; /* "transparent" wäre auch möglich */
}
Wenn du, wie von dir angewendet, die
background-Deklaration lediglich auskommentierst, besitzt die entsprechende Regel aus den beiden vorangegangen Selektoren (#Huelle-Navi ul li a, #Huelle-Navi ul li a:hover) hier ihre Gültigkeit.
Btw,
list-style:none auf das
a-Element anzuwenden, ergibt keinen Sinn, da dieses Element keinen festen Bestandteil einer Liste darstellt, sondern einen Hyperlink auszeichnet, der sich in einer Liste einbetten lässt, und somit diese CSS-Formatierung absolut wirkungslos bleibt.
Oder hast du schon mal versucht, das
a-Element auf diese Weise zu gestalten?
Im letzten Schritt wird für die Listenelemente der jeweiligen Menüebene das gewünschte Listenzeichen definiert:
Code:
#Huelle-Navi ul li {
list-style:none; /* kein Listenzeichen für obere Menüebene */
}
#Huelle-Navi ul ul li {
list-style:square; /* quadratisches Listenzeichen für zweite Menüebene */
}
Achtung: Da zu Beginn des Stylesheets mit dem Universalselektor
* für alle im HTML-Dokument enthaltenden Elemente, und folglich auch für die
ul-Listenelemente, ihre Polsterungseigenschaften auf null zurückgesetzt werden, zeigen in diesem Fall die standardkonformen Browser das Listenzeichen der zweiten Ebene zunächst nicht an. Daher ist für das
ul- oder
li-Element dieser Ebene ein linker Außenabstand erforderlich, damit das Listenzeichen dargestellt wird.
Zum Schluß noch eine grundsätzliche Anmerkung: Wenn diverse Regeln im Stylesheet nicht benötigt werden, und du sie zunächst nur auskommentieren (deaktivieren) möchtest, bevor sie endgültig aus dem Stylesheet genommen werden, dann bitte nicht nur den Selektor, sondern auch seine enthaltende Regelmenge in den Kommentar (
/* */) packen, denn ansonsten validiert der CSS-Code nicht, wie die sieben Fehlermeldungen der
Ergebnisse des CSS-Validators http://www.sky-divezone.de/Other/WIKO/styles-neu.css (CSS level 2.1) dokumentieren.
mfg Maik
