Menu WordPress TwentyTen : comment sélectionner en CSS des sous-menus à une position précise ?

Je stylise le menu du haut du thème WordPress TwentyTen.

Je veux que tous les sous-menus du premier élément de menu aient une largeur de 200px,

tous les sous-menus du deuxième élément de menu doivent avoir une largeur de 250 pixels,

et tous les sous-menus du troisième élément de menu doivent avoir une largeur de 300 pixels.

Par exemple, le menu a la structure suivante :

SUR

• Mission
• Histoire
• Personnes

PRESTATIONS DE SERVICE

• Prestation1
• Prestation2
• Prestation3

DES PRODUITS

• Produit1
• Produit2
• Produit3

Je veux que tous les éléments sous ABOUT aient une largeur de 200px, tous les éléments sous SERVICES aient une largeur de 250px et tous les éléments sous PRODUCTS aient une largeur de 300px.

Comment puis-je les sélectionner dans WordPress en utilisant uniquement CSS ? (Considérant que le menu est généré dynamiquement et que l’en-tête n’a que la commande wp_nav_menu ?)

Solution n°1 trouvée

Utilisez un sélecteur CSS qui correspond à chaque niveau. Comme ça:

#access ul {
   width: 200px;
}
#access ul ul {
   width: 250px;
}
#access ul ul ul {
   width: 300px;
}

Solution n°2 trouvée

En supposant que vous utilisez une structure de menu personnalisée définie dans la page d’interface d’administration Apparence/Menus, vous pouvez ajouter des classes CSS à chaque élément de sous-menu à partir de là.

Accédez à la page d’administration, puis choisissez « Options d’écran » en haut. En dessous, vous trouverez une série de cases à cocher sous « Afficher les propriétés du menu avancé ». L’un d’eux est « Classes CSS ». Une fois que vous avez coché cette case, vous devriez constater que chacun de vos volets d’options de sous-menu a maintenant une zone de texte « Classes CSS (facultatif) » où vous pouvez ajouter une ou plusieurs classes.

Une fois que c’est fait, vous pouvez vous coiffer comme bon vous semble…