salve a tutti,
ho scritto un file CSS partendo da una guida che metteva in allegato il file CSS di partenza e i vari altri file di supporto HTML e immagini qui allegati.

Ho scritto perciò un file CSS partendo dal CSS allegato, ma non funziona.
Il suo scopo è quello di traslare di 20 pixel l'elemento della lista non ordinata (ul) che viene "puntato" in quel momento (quello che ha sopra il puntatore). Ho utilizzato perciò l'oggetto a:hover , ma non funziona. Quando sposto il puntatore sul link, non succede nulla. Perché?

Grazie mille!!
PS. Ecco il CSS e il relativo HTML:

CSS
codice:
ul#menu{
    float: left;
    width: 150px;
    height: 800px;
    list-style: none;
    font-style: bold;
    border-bottom: 5px outset #0B77BE;
    border-right: 5px outset #0B77BE;
    border-top: 5px outset #0B77BE;
    margin: 0 auto;
    /* IE10 */
    background-image: -ms-radial-gradient(right center, ellipse cover, #FFFFFF 0%, #AFDBDE 50%, #0E93EB 100%);

    /* Mozilla Firefox */
    background-image: -moz-radial-gradient(right center, ellipse cover, #FFFFFF 0%, #AFDBDE 50%, #0E93EB 100%);

    /* Opera */
    background-image: -o-radial-gradient(right center, ellipse cover, #FFFFFF 0%, #AFDBDE 50%, #0E93EB 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(radial, right center, 0, right center, 989, color-stop(0, #FFFFFF), color-stop(0.5, #AFDBDE), color-stop(1, #0E93EB));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-radial-gradient(right center, ellipse cover, #FFFFFF 0%, #AFDBDE 50%, #0E93EB 100%);

    /* Proposed W3C Markup */
    background-image: radial-gradient(right center, ellipse cover, #FFFFFF 0%, #AFDBDE 50%, #0E93EB 100%);
}
ul#menu li a:hover{
    transform: translate(20px, 0px);
      -ms-transform: translate(20px, 0px);
      -moz-transform: translate(20px, 0px);
      -webkit-transform: translate(20px, 0px);
      -o-transform: translate(20px, 0px);
}
ul#menu li a{
    font-size: 30px;
}
HTML
codice:
<ul id="menu"> [*]Prova[*]Prova2 [/list]