puoi mettere un altro ul all'interno dell'li di product in questo modo:

codice:
[*]products
   <ul>[*]Subproduct 1      [*]Subproduct 2[*]Subproduct 3[/list]
Poi stilarlo in modo che gli[*] abbiano altezza fissa ed overflow: hidden;

Infine, aggiungi un effetto al passaggio del mouse sul[*] di product che aumenti l'altezza dello stesso.
Per farlo usa una libreria JS tipo Mootools

Devi solo aggiungere la libreria alla pagina e mettere lo script:

Io farei anche una modifica al codice HTML:

codice:
<div id="container-navigation">  
   <ul id="navigation">
      <li class="Toogler">home   
      <li class="Toogler">
         products
         <ul>[*]Subproduct 1      [*]Subproduct 2[*]Subproduct 3[/list]
         
      <li class="Toogler">services   [/list]
</div>
il CSS provalo così:

codice:
li.Toogler{
   height: 20px;
   overflow: hidden;
}
Poi come JS:

codice:
<script type="text/javascript">
   window.addEvent('domready', function(){
      $$('#navigation li.Toogler').each(function(li){
         li.set('oldheight', this.getStyle('height').toInt());
         li.addEvents({
            'mouseenter' : function(){
               var height = this.getElement('ul').getSize().y+this.getStyle('height').toInt();
               this.tween("height", height);
            },
            'mouseleave' : function(){
               this.tween('height', this.get('oldheight').toInt());
            }
         });
      });
   });
</script>
Questa è un'idea, ovviamente si possono fare anche altre cose.