Non mi piace il nome active per una classe: active e` parola chiave del CSS e questo puo` generare confusione (nel programmatore prima che nel brwoser).

Quindi io farei:
codice:
 HTML:
<ul id="menu">
<li class="attivo">Home[*]Prodotti[/list]

CSS:
#menu {
  ...
}
#menu li {
  ...
}
#menu li a {
  ...
  color: #838383;
  background: white;  /* oppure transparent */
}
#menu li a:hover {
  color:black;  
  background-color: #838383;
}
#menu li.attivo a, #menu li.attivo a:hover {
  ...
  color:black;  
  background: #838383;
}
Spero di aver interpretato giusto.

Nota che se il blocco <a> copre completamente il[*] non ha senso definire uno stile per li:hover perche` non verra` mai usato

E per coprire competamente il[*] con l'<a> potrebbe essere corretto definire anche
codice:
... a {
  display: block;
  width: 100%;
  height: 100%;
}
Tieni presente che con il tuo codice al click chiami un JS. Alla fine del JS ho inserito un return:false per evitare che il link venga eseguito (e la pagina venga spostata in cima)

Comunque la classe attiva non viene modificata, quindi quando rilasci il mouse o lo sposti dal link questo torna nella posizione a riposo.
Con JS puoi anche modificare la classe (puoi attribuire il link ad un'atra classe, oppure puoi cambiare gli attributi CSS a quel link). Questo e` un problema diverso, che puoi chiedere nel forum JS.

E mi pare che quel JS abbia degli errori.
Normalmente si usa una cosa di questo tipo:
document.getElemenById('article').style.visibility ='visble';
dove chiaramente "article" e` un id attribuito ad uno (ed uno solo) oggetto della pagina

la tua sintassi potrebbe funzionare in qualche brwoser (ad esempio IE se usato in modo retrocompatibile), ma non in tutti.