LISTBOX EN CSS, JSCRIPT ET DHTML

<!-- Code de la liste, une puce par item dans la liste (A mettre dans la partie Body) -->
<div class="listbox">
<ul>
<li id="item1" onclick="changeitem('item1');">Texte de l'item1</li>
<li id="item2" onclick="changeitem('item2');">Texte de l'item2</li>
<li id="item3" onclick="changeitem('item3');">Texte de l'item3</li>
<li id="item4" onclick="changeitem('item4');">Texte de l'item4</li>
<li id="item5" onclick="changeitem('item5');">Texte de l'item5</li>
</ul>
</div>
<!-- Fin du code la liste -->

<!-- Code CSS (A mettre dans head)-->
ul {
	margin: 0pt;
	padding: 0pt;
}

.listbox {
	background-color: #FFF;
	border-width: 1px;
	border-color: rgb(127, 157, 185);
	border-style: solid;
	cursor: arrow;
}
.listbox li {
	text-align: left;
	list-style-type: none;
	margin-left: 0px;
}
.listbox a {
	color: #000;
	text-decoration: none;	
}

.currentitem{
	cursor: arrow;
	background-color: rgb(49, 106, 197);
	border-color: rgb(206, 149, 58);
	border-style: dotted;
	border-width: 1px;
	color: #FFF;
}

.normalitem {
	background-color: #FFF;
	border-style: none;
	list-style-type: none;
	color: #000;
	text-decoration: none; 
}
<!-- Fin du code CSS -->

<!-- Code JScript (A mettre dans Head) -->
var selecteditem = "";
var itembase = "item";
//La fonction changeitem utilise l'attribut 'nom' qu'on lui passe pour attribuer un fond bleu à l'item qui a pour id 'nom'. La variable selecteditem sert à garder la trace du dernier item sélectionné et ainsi pouvoir lu attribuer un fond neutre lors du changement d'item.
function changeitem(nom) {
	if (selecteditem != "") {
		eval("document.all." + selecteditem + ".className='normalitem';");
	}

	eval("document.all." + nom + ".className='currentitem';");
	selecteditem = nom;
}

//Cette fonction utilise l'évènement qu'on lui passe pour déterminer la touche appuyée et lancer la fonction de changement d'item
function recognizekey(evenement) {
	var key = window.event ? evenement.keyCode : evenement.which;
	if (key == 40) { //touche flèche bas
		move("down");
	}
	else if (key == 38) { //touche flèche haut
		move("up");
	}
}

//Cette fonction calcule le numéro de l'item suivant ou précédent en se basant sur la syntaxe du nom des items : itembase1, itemBase2, itembase3, etc.. 
function move(direction) { 
    if (selecteditem != "") { 
        eval("document.all." + selecteditem + ".className='normalitem';"); 
        var itemnumber = selecteditem.substr(itembase.length); //Extrait la chaine qui commence juste après le nom générique itembase, c'est à dire le numéro de l'item.
        var newitemnumber = "";
    } 
    
    if (direction == "down" && selecteditem != "") { 
        try {
			newitemnumber = itemnumber - (-1) ;
			eval("document.all." + itembase + newitemnumber + ".className='currentitem';"); 
			selecteditem = itembase + newitemnumber ;
        }
        catch (ex) {
			eval("document.all." + itembase + 1 + ".className='currentitem';");
			selecteditem = itembase + 1;
        }
    } 
    
    if (direction == "up" && selecteditem != "") { 
        try {
			newitemnumber= itemnumber - 1 ;
			eval("document.all." + itembase + newitemnumber + ".className='currentitem';"); 
			selecteditem = itembase + newitemnumber ;
        }
        catch (ex){
			eval("document.all." + selecteditem + ".className='currentitem';");
        }
    } 
}
<!-- fin du JSript -->