menu a tendina e css (no js)

[stranyera]

Ciao a tutti...ho questa stuazione:

#Navigation {
    width: 780px; height: 34px;
    background: url("images/navigation.jpg");
    margin: 0px; padding: 0;
    position: relative;}
	
#Navigation span {display: none;}
#Navigation ul {list-style-type: none;}
#Navigation li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#Navigation li, #Navigation a {height: 34px; display: block;}

  #home {left: 0; width: 120px;}
  #milano {left: 120px; width: 70px;}
  #pavia {left: 190px; width: 102px;}
  #citta {left: 292px; width: 126px;}
  #provincia {left: 418px; width: 77px;}
  
  #home a:hover {background: transparent url("images/navigation.jpg") 0 -34px no-repeat;}
  #milano a:hover {background: transparent url("images/navigation.jpg") -120px -34px no-repeat;}
  #pavia a:hover {background: transparent url("images/navigation.jpg") -190px -34px no-repeat;}
  #citta a:hover {background: transparent url("images/navigation.jpg") -292px -34px no-repeat;}
  #provincia a:hover {background: transparent url("images/navigation.jpg") -418px -34px no-repeat;}

il relativo html è questo:

<ul id="Navigation">
      <li id="home"><span>Link 1</span>
      <li id="milano"><span>Link 2</span>
      <li id="pavia"><span>Link 3</span>
      <li id="citta"><span>La citta'</span>
      <li id="provincia"><span>La Provincia</span>[/list]

l'immagine navigation.jpg è quella in allegato.

Ecco, a me servirebbe che SOLO alla voce "La provincia" andando sopra col mouse mi apaprisse una tendina con altre voci cliccabili.

Come fare?