Menu déroulant horizontal en CSS : presque ?

Bonjour à tous, et bravo pour ce merveilleux site web, si utile !

Je suis en train de terminer mon site web, www.yagraph.org, fait avec le CMS Drupal... j'ai construit le template à partir d'un template-type (Zen) pour gagner du temps.

Tout est presque bon, mais je bloque sur le menu déroulant, alors que je sais que je ne suis pas très loin...
C'est l'usage du sélecteur d'enfant (>) que je ne maitrise pas... j'ai fait plein de recherches, plein de tests, mais sans arrivé à obtenir ce que je voulais, quelque chose de semblable à cet exemple (explications ici)

Pour voir l'état actuel de mon menu vous pouvez regarder cette page.

HTML :

<div class="content">
<ul class="menu">
<li class="collapsed first">
<a title="À propos de ce site web" href="/yagraph/content/propos">À propos</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Création graphique" href="/yagraph/content/creation-graphique">Création</a>
<ul class="menu">
<li class="leaf first">
<a title="Types de prestation en création graphique" href="http://yagraph.org/yagraph/content/creation-graphique-types-prestation">Types</a>
</li>
<li class="leaf">
<a title="Méthode de travail en création graphique" href="http://www.yagraph.org/yagraph/content/creation-graphique-methode-travail">Méthode</a>
</li>
<li class="leaf">
<a title="Tarifs de création graphique" href="http://www.yagraph.org/yagraph/content/creation-graphique-tarifs">Tarifs</a>
</li>
<li class="leaf last">
<a title="Le petit plus du libre en création graphique" href="http://www.yagraph.org/yagraph/content/creation-graphique-petit-plus-libre">Le petit plus</a>
 </li>
</ul>
</li>
<li class="collapsed">
<a title="Formation" href="/yagraph/content/formation">Formation</a>
</li>
<li class="collapsed">
<a title="Infographie & Logiciels libres" href="/yagraph/content/infographie-libre">Libre</a>
</li>
<li class="collapsed last">
<a title="3D / Illustrations / Infographie / WebDesign ..." href="/yagraph/gallery">Galerie</a>
</li>
</ul>
</div>

CSS :

/** navbar **/
  #navbar
  {
    background: #798A92 url(/yagraph/sites/all/themes/yagraph/images/nav.png) no-repeat scroll right bottom;
    border-bottom:3px solid #494949;
  }

  #navbar-inner
  {
   padding-top:10px;
   position: absolute;
   right: 2em;
  }

  #navbar .menu
  {
   display: inline;
  }

  #navbar ul /* Primary and secondary links */
  {
    margin: 0;
    padding: 0;
  }

  #navbar li /* A simple method to get navbar links to appear in one line. */
  {
    float: left;
    padding: 10px 20px 0 0;
  }

  #navbar a:link,
  #navbar a:visited,
  #navbar a:active
  {
    color:white;
  }
  
  #navbar a:hover,
  #navbar a:focus
  {
    color:#5AA02C;
  }

  #navbar li.collapsed:hover > li.expanded { display: block; }

  #navbar li.expanded
  {
   padding: 0.5em 0.5em 0 0; /* LTR */
   margin: 0;
   font-size: 1.7em;
   font-weight: bold;
  }

  #navbar li.collapsed
  {
   padding: 0.5em 0.5em 0 0; /* LTR */
   margin: 0;
   font-size: 1.7em;
   font-weight: bold;
  }

  #navbar li.leaf
  {
   padding: 0.5em 0.5em 0.5em 0; /* LTR */
   margin: 0;
   float: none;
   background-color:#272E38;
   width: 135px;
   font-size: 0.7em;
   border-top: 1px dashed black;
  }

  #navbar li a.active
  {
  }

en gros cette ligne ne fonctionne pas... je me trompe quelque part.

 #navbar li.collapsed:hover > li.expanded { display: block; }

je voudrais que le menu s'étende au survol de la souris... donc que "collapsed" deviennent "expanded".

Merci beaucoup d'avance pour votre aide...

C'est une mauvaise idée de tout faire en css...


(Faudrait coller un sujet en haut de ce forum ça revient tout le temps cette question... )

Bon, ok, je vais envisager ça avec javascript !

Merci du coup de main