Bonjour,

comme une démonstration vaut mieux qu'un long discours voici un menu déroulant sur un niveau que je souhaite terminer pour avoir plusieurs niveaux de menu :
http://codepen.io/Ell0ne/pen/YPmaRq

Plus précisément, dans le cas de l'exemple donné, je souhaite :
Lorsque je clique sur le sous-menu 2 appartenant au menu A : le contenu de mon sous-menu 2 (2.1, 2.2, 2.3...) apparaisse.

Lorsque je clique sur le sous-menu 3 appartenant au menu A : le contenu de mon sous-menu 3 (3.1, 3.2, 3.3...) apparaisse et le contenu de mon sous-menu 2 (et de tous les autres sous-menus du même niveau) disparaisse si il était affiché, de la même manière qu'il n'est possible d'afficher qu'un seul menu à la fois (A, B, C et D).

Changer la couleur de fond d'un sous-menu si il contient un autre sous-menu (comme 2, 3 ou encore 12). J'ai attribué la classe dropdown-sub1 à ces sous-menus.
Changer la couleur de fond du contenu de mes sous-menus (2.1, 2.2 , ...). Ces "sous-sous-menu" sont de classe in-sub1.

Pour plus tard, ajouter de nouveaux niveaux de menu. Le prochain niveau de sous-menu serait alors de classe dropdown-sub2 qui contiendrait alors des éléments de classe in-sub2
Après quelques essais, je ne suis pas parvenu à attribuer les bonnes propriétés CSS à mes nouvelles classes, ni à effectuer les bonnes manipulations javascript pour le comportement souhaité.


J'espère que c'est assez clair avec l'exemple fourni.

Amicalement.