Sous menu large et transition type accordéon

Bonjour,
après plusieurs heures de recherches infructueuse je m'adresse à vous pour un petit coup de main. Je souhaite réaliser un sous menu large qui apparait au survol avec un effet accordéon
(exemple : http://www.audemarspiguet.com/en/watch-collection sur COLLECTIONS).

J'ai réussi à mettre une partie de l'effet en place mais mon sous menu garde la largeur de mon li alors que je voudrais l'avoir sur toute la page (en dév : http://www.riverphot.com/dev ).

Voici mon code

  <div class="verticalaccordion">
    <ul id="nav">
      <li><a href="#home" class="active">Menu1</a></li>
   
      <li class="sousmenu">
        <a href="">Sousmenu</a>
        <div id="sousmenu">Content</div>
      </li>
  </ul>    
</div>

ul li.sousmenu {
  display:block;
  overflow: hidden;
  height:40px;
  width:80px;

  /* CSS3 Transition Effect */
  transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
}

ul li.sousmenu a {
    display:block;
    padding-bottom:20px;
}


ul li.sousmenu:hover {
  height: 100px;
}

Une idée pour que ça prenne toute la largeur en gardant l'effet ?
Merci.
Modifié par riverphot (13 Mar 2012 - 11:28)

Hello.

Dans l'exemple que tu cites, le sous menu est positionné en absolute. Sinon, son apparition va décaler tout le contenu.

Au passage, les menus déroulants au survol, c'est le diable : Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs

Je connaissais déjà cet article mais il s'agit là d'un choix esthétique. Mais merci pour l'info

Par contre si je place mon div en absolute je perds l'effet de transition !!! puisque je sors du flux.

Une idée ?

Si tu regardes bien le code de ton exemple sous Firebug, tu verras que l'astuce est de "tricher" en faisant varier la valeur de top.

riverphot a écrit :
Je connaissais déjà cet article mais il s'agit là d'un choix esthétique.

Soit tu parles de l'effet de slide, et tu peux très bien obtenir la même chose au clic sans que l'utilisateur ne risque une TMS ; soit tu parles bien du fait que le menu apparaisse au survol, auquel cas ça ne relève pas de l'esthétisme mais du fail ergonomique.