Menu horizontal dynamique

Bonsoir,
Je viens vers vous ce soir car j'ai un petit problème sur lequel je bloque :s

Je veut faire un sous-menu qui est horizontal, mais celui-ci est dynamique du coup je ne connais pas le nombre de rubrique a l'avance, du coup je voulais que suivant la place prise les rubriques dépassant se mette en place avec un systéme de dropdown sur le dernier element...
Bon je ne suis pas du tout sur d'étre claire lol...

Exemple de code:

<nav>
        <ul>
             <!-- menu horizontale -->
             <li> rub 1</li>
             ......
             <li> rub x </li> <!-- ici on arrive au bout de la place disponible -->
             <ul>
                 <!-- on passe en dropdown sur le dernier élement -->
                  <li> rub x+1 </li>
                  .........
                  <li> rub x+x </li>
              </ul>
        </ul>
</nav>

Du coup le concept je pense que ces quelques chose comme sa qu'il faut que j'utilise, mais comment je peut savoir et faire pour mettre en place le système de dropdown sachant que je ne sait pas a l'avance de la taille du sous-menu (sa dépend de la catégorie ) et que la place disponible dépend de la taille de la fenêtre, car le menu est coller a d'autre élément de design et le tout est responsive.

J'avoue que je bloque un peu, et en plus je suis sur d'avoir écrit un message incompréhensible...
mais si certain on quand même vu la ou je voulais en venir merci de votre aide

Bonjour Rif5,

Bon si j'ai bien tout compris ( j'ai été obligé de relire 3 fois ^^) :
- si, à titre d'exemple, il y a x+1 rubriques au total, je verrai x rubriques dans ton menu principal, et 1 seule rubrique dans ta dropdown ?

Une solution en javascript :
- mettre un id à ta balise ul
- en JS : tu récupère tes lis sous forme de tableau :
- avec appendChild tu crée ton sous-menu et tu ajoutes une condition

Voila un exemple :

Code html :

        <ul id="monId">
             <li> rub 1</li>
             <li> rub 2</li>
             <li> rub 3</li>
             <li> rub 4</li>  
             <li> rub 5</li>
             <li> rub 6</li>
             <li> rub 7</li>
             <li> rub 8</li>
        </ul>

Code JS :

// Id de ton menu principal
var ul = document.getElementById('monId');
// Recuperation des lis de ton menu principal sous forme de tableau
var lis = ul.getElementsByTagName('li');
// Creation du sous-menu
var dropdown = document.createElement("UL");
// Definit le rang pour l'insertion du sous-menu : x pour toi
var flag = 6;

// Ajout des lis qui dépassent le flag dans le sous-menu
while(lis.length>flag){
dropdown.appendChild(lis[ flag]);
}
// ajout du sous-menu
lis[flag-1].appendChild(dropdown);

Résultat :
http://i59.tinypic.com/33biiir.jpg
Modifié par francois2688 (31 Jul 2015 - 17:04)

Merci pour ta réponse mais ça ne correspond pas tout a fait a ce que je cherche a faire
Mais bon j'avoue ne pas avoir été clair :s du coup je vous met une image de ce que je cherche a faire :


A savoir que je ne connait pas a l'avance le nombre de rubrique, elle sont charger via la bdd, et de toute façons le nombre peut être amener a changer n'importe quand, du coup ces pour sa que je cherche a avoir ce comportement.

De la même façon il faut que sa soit responsive, pour mobile pas de souci j'ai tout mis en dropdown, mais sur une fenêtre plus petite il faut que sa s'adapte comme il faut.
Exemple, si la fenêtre ne peut afficher que 4 rubrique horizontalement, il y aura 3 rubrique horizontal, après la 3éme on retrouvera le "autre" et les rubriques a x dessous.

Voila sa devrait être plus clair

Mais je sèche a faire quelque chose de potable, du coup je ne serait pas contre un petit coup de pouce

Merci de votre aide