Pulsanti colorati in menu

[samiel]

Ho un menu generato da questo codice:

<?php
$menus = array('main_menu' => array(
  "home"=>"Home",
  "chisiamo"=>"Chi siamo",
  "attivita"=>"Attività",
  "laboratorio"=>"Laboratorio",
  "amici"=>"Amici",
  "contatti"=>"Contatti"
    ),
"attivita_menu"=>array(
"concluse"=>"Concluse",
"inprogramma"=>"In programma"),
"laboratorio_menu"=> array("lavori"=>"Lavori"),
"contatti_menu"=>array("dovesiamo"=>"Dove siamo",
"scrivici"=>"Scrivici"
  )
);
?>

<div id="nav">
<?php    foreach ($menus['main_menu'] as $key => $menu) {
        // scorro il menu principale
?>
        <li id="<?php echo $key; ?>">
        <a href="index.php?pagina=<?php echo $key;
?>"><span></span><?php echo $menu ?></a>
<?php
      if (isset($menus[$key."_menu"]))  {
      // se esiste una chiave formata da nomevoceprincipale_menu
      // allora esiste un submenu
      ?>
      <ul>
      <?php   foreach ($menus[$key."_menu"] as $subKey => $submenu) {
              // scorro subito il submenu
?>[*]<a href="index.php?pagina=<?php echo $key; ?>
&sezione=<?php echo $subKey; ?>"><?php echo $submenu; ?></a>
      <?php   } ?>[/list]
      <?php } ?>
      
<?php   }
?>
</div>

La sezoine corrispondente del CSS è:

#nav {padding:0; margin:0; list-style-type:none}
#nav ul {margin:0; list-style-type:none; display:none; position:absolute;
padding:0}
#nav li {float:left; position:relative; width:9em; padding:0;
margin-right:1em; font-size:90%; font-weight:bold}
#nav a:link, #nav a:visited {display:block; text-decoration:none;
padding:0.4em; background-color:gray; color:white}
* html #nav a {width:100%}
#nav ul li {background-color:#F1F5F9; font-size:100%; margin-bottom:-1px;
margin-top:1px; border-bottom: 1px solid white}
#nav li:hover ul {display:block; margin-left:1em}

Mmi piacerebbe creare un effetto grafico per cui i vari pulsanti del menu
non sono tutti grigi allo stesso modo, ma incrementano progressivamente
il tono di grigio. Si può fare da dentro PHP?

Grazie
M.