Menu déroulant css/javascript 2 niveaux: problème de décalage

Salut à tous, voilà je veux faire une menu déroulant à 2 niveaux (je me suis inspiré pour celà des fameux Suckerfish Dropdowns).
Là où je calle c'est que je voudrai que les premiers sousmenu s'affichent en vertical (en poussant les titres principaux vers le bas) et que les sous-sousmenu eux s'affichent sur la droite du menu.
Pour l'instant les sousmenu s'affichent bien en vertical mais ils cachent les titres principaux au lieu de les pousser, du coup mon menu est illisible !!

Voilà si qqun peut m'aider sur ce coup là.....

le code html:

<ul id="menu">
   <li>
    <a href="#">activites</a>
    <ul id="smenu">
      <li>
        <a href="#">activités artistiques <img src="triangle.gif"></a>
        <ul id="menu">
          <?php
                                      $resultat=mysql_query("select*from activites where groupe like 1",$connexion);
                                      $nb=mysql_num_rows($resultat);
                                      for ($i=0;$i<$nb;$i++)
                                      {
                                      $nom=mysql_result($resultat,$i,"nom");
                                      $adressepage=mysql_result($resultat,$i,"adressepage");
                                      echo "<li><a href=$adressepage>$nom</a></li>\n";
                                      }
                                      ?>
        </ul>
      </li>
      <li>
        <a href="#">danse <img src="triangle.gif"></a>
        <ul id="menu">
          <?php
                                      $resultat=mysql_query("select*from activites where groupe like 2",$connexion);
                                      $nb=mysql_num_rows($resultat);
                                      for ($i=0;$i<$nb;$i++)
                                      {
                                      $nom=mysql_result($resultat,$i,"nom");
                                      $adressepage=mysql_result($resultat,$i,"adressepage");
                                      echo "<li><a href=$adressepage>$nom</a></li>\n";
                                      }
                                      ?>
        </ul>
      </li>
      <li>
        <a href="#">activités physiques <img src="triangle.gif"></a>
        <ul id="menu">
          <?php
                                      $resultat=mysql_query("select*from activites where groupe like 3",$connexion);
                                      $nb=mysql_num_rows($resultat);
                                      for ($i=0;$i<$nb;$i++)
                                      {
                                      $nom=mysql_result($resultat,$i,"nom");
                                      $adressepage=mysql_result($resultat,$i,"adressepage");
                                      echo "<li><a href=$adressepage>$nom</a></li>\n";
                                      }
                                      ?>

        </ul>
      </li>
      <li>
        <a href="#">activités techniques <img src="triangle.gif"></a>
        <ul id="menu">
          <?php
                                      $resultat=mysql_query("select*from activites where groupe like 4",$connexion);
                                      $nb=mysql_num_rows($resultat);
                                      for ($i=0;$i<$nb;$i++)
                                      {
                                      $nom=mysql_result($resultat,$i,"nom");
                                      $adressepage=mysql_result($resultat,$i,"adressepage");
                                      echo "<li><a href=$adressepage>$nom</a></li>\n";
                                      }
                                      ?>

        </ul>
     </li>
    </ul>
  </li>
  <li>
    <a href="#">manifestations</a>
    <ul id="menu">
      <li><a href="actualite.php">à venir</a></li>
      <li><a href="archives.php">archives</a></li>

    </ul>
  </li>
  <li>
    <a href="#">cinéma</a>
    <ul id="menu">
      <li><a href="films.php">les films du mois</a></li>
      <li><a href="#">films précédents</a></li>

    </ul>
  </li>
  <li>
    <a href="#">publications</a>
    <ul id="menu">
      <li><a href="vermay.php">vermay</a></li>
      <li><a href="#">le jourmalt</a></li>
    </ul>
  </li>
  <li>
    <a href="#">informations</a>
    <ul id="menu">
      <li><a href="association.php">association</a></li>
      <li><a href="#">inscriptions</a></li>
      <li><a href="contacts.php">contacts</a></li>
      <li><a href="acces.php">plan d'accès</a></li>
      <li><a href="horaires.php">heures d'ouvertures</a></li>
   </ul>
  </li>
  
</ul>

et le code css:

#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#menu a {
display: block;
width: 10em;
text-decoration: none;
color: white;
font-weight: bold;
font-family: Verdana, Geneva, Arial, sans-serif;
}

/* le menu principal */
#menu li {
width: 14em;
height: 30px;
background: #a490de;
border: 1px solid grey;
}

/* les sous-menus */
#menu li ul {
	position: absolute;
	width: 14em;
	height: 30px;
	left: -999em;
}
#menu li:hover ul {
        position: relative;
	left: auto;
	width: 14em;
	height: 30px;
}
#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}


/* décale le ssmenu vers la droite */
#menu li ul ul {
	margin: -1em 0 0 10em;
}
/* cache le ssmenu */
#menu li:hover ul ul, #menu li.sfhover ul ul {
	position: absolute;
        left: -999em;
}
/* montre le ssmenu */
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
        left: auto;
}