Ich habe follgenden Code, für eine Dynamische CSS-Navigation:
Doch hier wird der Text, in den Navigationsleisten, Rot angezeigt. Wie kann ich die Farbe ändern?
HTML:
<html>
<head>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.0em;
border: 1px solid black;
background-color: silver;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.0 em; padding: 0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.8em; left: 0.0em; /* FALS MAN DAS UNTERMENÜ VERSCHIEBEN WILL */
display: none; /* Unternavigation ausblenden */
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.0em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 9.4em; /* BREITEN DER SPALTEN ÄNDERN */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold; /* FARBE DER NORMALEN SPALTEN */
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white; /* FARBE BEIM MOUSEOVER */
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
</style>
</head>
<body>
<h1 id="Beispiel">Überschrift</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
</body>
</html>