navigation a: hover

[Andreas Harzer]

Hallo liebe Forumer,

ich würde gerne eine professionelle Lösung zu meinem Problem bekommen.Deswegen wende ich mich nochmal an euch. Ich finde die Lösung für mein Problem einfach nicht.

Problem: Ich habe eine horizontale Navigation gebaut. In der Navigationliste sind die einzelnen Punkte mit Links und target hinterlegt. Mit der Pseudoklasse hover habe ich es jetzt schon hinbekommen, dass sich die drüber fahren mit der Maus die Hintergrundfarbe ändern. Gerne würde ich jetzt noch, dass der aktive angeklickte Punkt in der besagten Hintergrundfarbe stehen bleibt. Gibt es hier eine Möglichkeit nur mit html und css? Hier mein "Code".

nav {
    float: right;
    background-color: #F5F5F5;
    font-family: 'Fresca', sans-serif,Verdana, Geneva, sans-serif;
    font-size: 120%;
    color: red;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 3em;
    padding: 0em;
    border: 2px solid #3b444b;
    border-top: none;
    text-shadow: grey 5px 3px 5px;
}


ul#menu li {
    display: inline;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


li {
  float: left;
}

li a {
  display: block;
  color: red;
  text-align: left;
  padding:15px 12px;
  text-decoration: none;
    
}


li a:hover, a:focus, a:active {
    background-color: red;
    color: white;
 
}

Ich bedanke mich vorab für eure Mühe.

Gruß Andreas

Edit Rolf B: Code-Blöcke formatiert man mit ~~~, inline-Code mit Backticks.