Hallo zusammen
Ich brauche eure Hilfe. Ich bin an einer Homepage mit HTML5 und CSS3. Mein Problem ist die Navigation, bei der ich nicht weiterkomme. Horizontal liegt die Hauptnavigation und senkrecht die Untermenüs.
Der aktive Link von der Hauptnavigation leuchtet wie gewünscht rot, sobald ich ein Menüpunkt anklicke. Soweit, so gut.
Nun möchte ich gerne, dass die Unternavigation ebenfalls rot leuchtet, wenn man ein entsprechendes Untermenü anklickt und dass der entsprechende Hauptmenüpunkt natürlich ebenfalls die rote Farbe behält. Es soll sofort ersichtlich sein, wo man sich genau auf der Internetseite befindet. Was muss ich tun, damit beides aktiv in roter Farbe leuchtet, sowohl das Hauptmenü wie auch das angeklickte Untermenü? Eine zusätzliche CSS-Regel?
Hier mal mein Code.
Ich bin echt froh um hilfreiche Antworten und danke schon mal im Voraus dafür.
LG
Sedona
Ich brauche eure Hilfe. Ich bin an einer Homepage mit HTML5 und CSS3. Mein Problem ist die Navigation, bei der ich nicht weiterkomme. Horizontal liegt die Hauptnavigation und senkrecht die Untermenüs.
Der aktive Link von der Hauptnavigation leuchtet wie gewünscht rot, sobald ich ein Menüpunkt anklicke. Soweit, so gut.
Nun möchte ich gerne, dass die Unternavigation ebenfalls rot leuchtet, wenn man ein entsprechendes Untermenü anklickt und dass der entsprechende Hauptmenüpunkt natürlich ebenfalls die rote Farbe behält. Es soll sofort ersichtlich sein, wo man sich genau auf der Internetseite befindet. Was muss ich tun, damit beides aktiv in roter Farbe leuchtet, sowohl das Hauptmenü wie auch das angeklickte Untermenü? Eine zusätzliche CSS-Regel?
Hier mal mein Code.
HTML:
<!--start hauptnavigation-->
<nav id="hauptnavi">
<ul>
<li id="hauptnavi-1"><a href="index.html" title="Startseite">Startseite</a></li>
<li id="hauptnavi-2"><a href="inhalt/ueber_mich/ueber_mich.html" title="Über mich">Über mich</a></li>
<li id="hauptnavi-3"><a href="inhalt/kontakt/kontakt.html" title="Kontakt">Kontakt</a></li>
</ul>
</nav>
<!--ende hauptnavigation-->
<!--start subnavigation, hier als Beispiel die Kategorie: über mich-->
<nav id="subnavi">
<ul>
<li id="subnavi-1-2"><a href="ausbildung.html" title="Ausbildung">Ausbildung</a></li>
<li id="subnavi-1-3"><a href="referenzen.html" title="Referenzen">Referenzen</a></li>
<li id="subnavi-1-4"><a href="impressionen.html" title="Impressionen">Impressionen</a></li>
</ul>
</nav>
<!--ende subnavigation-->
CSS:
/* Hauptnavigation */
#hauptnavi{
background-color:#CCC;
text-align:center;
}
#hauptnavi ul li {
display:inline;
list-style-type:none;
}
#hauptnavi a {
display:inline-block;
font-size:.9em;
color:#333;
padding:0 20px 0 15px;
line-height:30px;
text-transform:uppercase;
}
#hauptnavi a:hover,
#hauptnavi a:focus,
#hauptnavi a:active,
#home #hauptnavi-1 a,
#ueber_mich #hauptnavi-2 a,
#kontakt #hauptnavi-3 a {
color:#F00;
}
/* Sub-Navigation */
#subnavi {
padding:40px 0 40px 15px;
}
#subnavi ul {
list-style-type:none;
}
#subnavi li {
}
#subnavi a {
display:block;
font-size:.9em;
color:#000;
line-height:2em;
}
#subnavi a:hover,
#subnavi a:focus,
#subnavi a:active,
#ausbildung #subnavi-2-1 a,
#referenzen #subnavi-2-2 a,
#impressionen #subnavi-2-3 a,
#kontaktformular #subnavi-3-1 a {
color:#F00;
}Ich bin echt froh um hilfreiche Antworten und danke schon mal im Voraus dafür.
LG
Sedona
Zuletzt bearbeitet von einem Moderator:
