css Navigation, Liste, Hintergrundfarbe ändern?

[Micha]

Hallo allerseits,

ich habe eine Navigation aus einer einfache Html-Liste die via css formatiert ist (Quelle: SelfHtml). Ich möchte gern das wann immer man einen dieser Listenpunkte drückt, sich die Hintergrundfarbe des Listenelements ändert und "stehen bleibt". Damt der User erkennen kann wo er ist bzw. was er gedrückt hat. Die Frage ist wie kan ich via Javascript auf dieses Listenelement und deren Eigenschaft (die backgroundColor!) ändern?

Code::

.. die .css Anweissungen

body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0.2em;
    border: 1px solid gray;
    background-color: #eee;
  }

ul#Navigation a {
    text-decoration: none; font-weight: bold;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover {
    color: white; background-color: gray;
  }

... meine Html-Liste

<ul id="Navigation">
    <li id="listelement1"><a href="#" onClick="changeBgColor();">Beispiel 1</a></li>
    <li id="listelement2"><a href="#">Beispiel 2</a></li>
    <li id="listelement3"><a href="#">Beispiel 3</a></li>
  </ul>

... und der JavascriptVersuch ;-))

function changeBgColor() {
  document.all.listelement1.style.backgroundColor = "yellow";
}

.. Genau dieser funktioniert nicht. Ich kann also nicht auf diese
Eigenschaft auf diese Art zugreifen.
Wie geht das?

Vielen Danke und Gruß
Micha