Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer un menu déroulant sous Blogger
Vous avez été nombreux à me demander comment faire un menu déroulant. Ca y est ! Aujourd'hui je vous propose enfin le tutoriel tant attendu ! ;)

Créer un menu déroulant sous Blogger
Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article créé spécialement pour ce tutoriel ;)

Introduction

Tout d'abord, comme toujours, sauvegardez l'apparence de votre blog avant d'y apporter des modifications. Vous pourrez ainsi revenir en arrière si besoin ;)

Ce tutoriel est une suite aux tutoriels sur la création et la personnalisation de sa barre de navigation. Je vous conseil donc de les lire.

Une fois la sauvegarde effectuée, on peut passer aux choses sérieuses.

Création du menu déroulant

Pour insérer des sous-catégories dans votre menu, il faut modifier le code HTML de celui-ci. Pour cela, allez dans la partie Mise en page sur le tableau de bord :

Créer un menu déroulant sous Blogger

Puis cliquez sur Modifier sur le widget correspondant à votre menu :

Créer un menu déroulant sous Blogger

Pour ajouter des sous-catégories à un lien, il faut ajouter une nouvelle liste de liens comme ceci :
<ul>
<li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
<li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
</ul>
Où :
  • http://adressedublog.fr/souscatégorie1 correspond à l'adresse url de la sous-catégorie 1
  • Sous Catégorie 1 correpsond au texte du lien visible dans le menu déroulant

Cette liste de sous-catégories va être intégrée au menu entre les balises </a> et </li> du lien sous lequel on veut qu'ils apparaissent.

Par exemple, si je veux que la liste de sous-catégories apparaisse en survolant le lien "Catégories" de mon menu alors j'écris :
<li><a title="Catégories" href="#">Catégories</a>

<ul>
<li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
<li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
</ul>

</li>
Notez que pour l'adresse url de "Catégories" j'ai écrit "#". Ceci permet de ne pas inclure d'adresse url. De cette manière, quand on cliquera sur Catégories dans le menu, on ne sera pas renvoyé vers un lien. Seule la liste de sous-catégories apparaîtra.
Mais vous pouvez tout à fait y inclure une adresse url si vous le souhaitez. Ceci n'affecte pas le menu déroulant.

Une fois satisfait du contenu de votre menu déroulant, sauvegardez en cliquant sur Enregistrer :

Créer un menu déroulant sous Blogger

N'oubliez pas !
Un tutoriel exclusif pour créer un menu déroulant dans un menu déroulant vous attend à la fin du tutoriel !

Personnalisation de l'apparence du menu déroulant

Nous avons donc créé les liens de notre menu déroulant. Maintenant il faut ajuster son apparence pour qu'il ressemble à un menu déroulant, et le personnaliser :)

A noter que ce tutoriel est une suite du tutoriel de personnalisation de sa barre de navigation. Et que je considère que vous l'avez déjà personnalisé en suivant ce tutoriel. Ici on se concentre sur la partie "déroulante" du menu. Je vous conseil donc de lire le tutoriel précédent pour savoir comment changer la police, la taille de liens, leur couleur, et centrer la barre de navigation ;)

Cliquez sur Modèle dans le menu à gauche du tableau de bord :

Créer un menu déroulant sous Blogger

Puis sur Modifier le code HTML :

Créer un menu déroulant sous Blogger

Cliquez ensuite sur la flèche noir à gauche de <b:skin>...</b:skin> :
Créer un menu déroulant sous Blogger

Cliquez ensuite n'importe où dans la fenêtre de code et appuyez sur Ctrl et F en même temps. Une boîte de dialogue s'ouvrira en haut à droite de la boîte de code.
Tapez :
.tabs .widget li, .tabs .widget li {
et appuyez sur Entrer :

Créer un menu déroulant sous Blogger

Vérifiez que dans cette partie vous avez bien les 2 lignes suivantes :
display: inline-block;
float: none;
Comme ceci :
.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}
Si ce n'est pas le cas, rectifiez le code !

*EDIT*

Vérifiez également de la même manière que dans la partie :
.tabs-outer {
}
Vous avez le code suivant :
overflow: visible;
Comme ceci :
.tabs-outer {
overflow: visible;
}
Si vous ne le trouvez pas rajoutez le sous le code suivant :
.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}
Ce qui donne :
.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
}

.tabs-outer {
overflow: visible;
}
Ceci est important pour que le menu déroulant apparaisse correctement sous la barre de navigation !

On peut maintenant passer à la personnalisation du menu déroulant :)

Cliquez à nouveau dans la fenêtre de code et appuyez sur Ctrl et F en même temps. Tapez :
/* Content
Dans la boîte de dialogue et appuyez sur Entrer :

Créer un menu déroulant sous Blogger

Vous devriez retrouver la ligne /* Content comme ceci :

Créer un menu déroulant sous Blogger

C'est juste au dessus de cette ligne que nous allons inclure notre code pour personnaliser le menu déroulant.

Le code est un peu compliqué et long à expliquer. Donc pour faire simple, je vous propose de coller le code ci-dessous en entier au dessus de la ligne /* Content. Et je vous expliquerai comment personnaliser l'apparence du menu déroulant par la suite.
/* Apparence du menu déroulant */
.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;               /* Largeur de la barre des sous-catégories */
padding-top: 10px;    /* Distance entre barre des sous-catégories et barre de navigation */
z-index:9999;
}

.tabs .widget li:hover ul {
display: block;
margin-top: 0px;
margin-left:  -15px;        /* Alignement avec le lien de la barre de navigation */
}

.tabs .widget li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;                  /* Largeur de la barre des sous-catégories */
}

.tabs .widget li:hover li a {
background-color: #C49DB8;    /* Couleur du fond du lien */
}

.tabs .widget li ul a {
display: block;
height: auto;
margin: 0px;
padding-top: 5px;              /* Distance au dessus des liens */
padding-bottom: 5px;       /* Distance en dessous des liens */
padding-left: 10px;             /* Distance à gauche des liens */
text-align: left;
}

.tabs .widget ul ul a {
color: #ffffff;             /* Couleur des liens */
}

.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}
Comme ceci :

Créer un menu déroulant sous Blogger

On va maintenant voir comment personnaliser les sous-catégories du menu déroulant :

Changer la couleur des liens

Pour changer la couleur du lien de la sous-catégorie, il faut modifier la valeur de "color" du code suivant :
.tabs .widget ul ul a {
color: #ffffff;            /* Couleur des liens */
}

Changer la couleur des liens quand survolés par la souris

Pour changer la couleur du lien de la sous-catégorie quand survolé par la souris, il faut modifier la valeur de "color" du code suivant :
.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}

Changer la couleur du fond des liens

Pour changer la couleur du fond des liens des sous-catégories, il faut modifier la valeur de "background-color" du code suivant :
.tabs .widget li:hover li a {
background-color: #C49DB8;    /* Couleur du fond du lien */
}

Changer la couleur du fond des liens quand survolés par la souris

Pour changer la couleur du fond des liens des sous-catégories quand survolés par la souris, il faut modifier la valeur de "background-color" du code suivant :
.tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
color: #ffffff;               /* Couleur des liens quand survolés par la souris */
background-color: #B061A2;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}

Changer la largeur de la barre des sous-catégories

Pour changer la largeur de la barre des sous-catégories, si le texte d'un lien est renvoyé à la ligne par exemple, on peut changer la valeur de "width" des codes suivants, en augmentant ou diminuant le nombre de pixels px :
.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;           /* Largeur de la barre des sous-catégories */
z-index: 9999;
}
et
.tabs .widget li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;             /* Largeur de la barre des sous-catégories */
}

Modifier la distance au dessus, en dessous, et à gauche des liens

Pour modifier la distance au dessus des liens, il faut modifier la valeur de "padding-top" du code suivant.
Pour modifier la distance en dessous des liens, modifier la valeur de "padding-bottom" :
.tabs .widget li ul a {
display: block;
height: auto;
margin: 0px;
padding-top: 5px;              /* Distance au dessus des liens */
padding-bottom: 5px;           /* Distance en dessous des liens */
padding-left: 10px;            /* Distance à gauche des liens */
text-align: left;
}
De plus, modifier la valeur de "padding-left" permet de modifier la distance à gauche des liens.

Sur le code suivant, on peut changer l'alignement horizontal de la barre des sous-catégories avec la barre de navigation, en jouant sur la valeur de "margin-left".
Une valeur négative déplacera la barre des sous-catégories vers la gauche (comme dans l'exemple), et une valeur positive la déplacera vers la droite.
.tabs .widget li:hover ul {
display: block;
margin-top: 0px;
margin-left:  -15px;        /* Alignement avec le lien de la barre de navigation */
}

Modifier la distance entre la barre des sous-catégories et la barre de navigation

Pour modifier la distance entre la barre des sous-catégories et la barre de navigation, il faut changer la valeur de "padding-top" du code suivant :
.tabs .widget li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;               /* Largeur de la barre des sous-catégories */
padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
z-index: 9999;
}
Et voilà pour les bases !

Vous avez créé votre menu déroulant ! :D

Créer un menu déroulant sous Blogger

Pour information voici le code CSS de la barre de navigation utilisée en plus ici :
/* Espacement et Bordure du Dernier Lien de la Barre de Navigation */
.tabs-inner .section:last-child ul {
padding-right: 0px;
}

/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
padding-left: 0px;
}

/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
text-align: center;
background-color: #C49DB8;
}

/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Calibri;
text-transform: uppercase;
font-size: 14px;
color: #ffffff;
}

/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #ffffff;
}

/* Couleur du Fond des Liens quand Survolés par la Souris */
.tabs-inner .widget li:hover {
background-color: #B061A2;
}

/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
overflow: visible;
}

/* Centrer la Barre de Navigation + Largeur des Liens et de la Barre de Navigation*/
.tabs .widget li, .tabs .widget li {
display: inline-block;
float: none;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 15px;
margin: 0px;
}

Tutoriel exclusif !

Créer un menu déroulant dans un menu déroulant !

En vous inscrivant vous serez ajouté à la liste de contacts de Lady Bird Red.
Vous pourrez vous désabonner à tout moment.


Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article créé spécialement pour ce tutoriel ;)

Autres articles

210 commentaires:

  1. Merci pour tes tutos et conseils, qui sont toujours très bien expliqués et donc très facile à comprendre :)
    Cependant, pour le menu déroulant cela ne marche pas de mon côté. Les "sous-menus" ne déroulent pas, et s'affichent en dessous directement, ce qui fait que je me retrouve avec un menu sur trois lignes.
    Et dès que je met ce code-ci comme tu l'explique :
    ".tabs .widget li, .tabs .widget li {
    display: inline-block;
    float: none;
    }"
    Cela me remet mon menu normalement, sur une seule ligne, mais aucun sous menu n'apparaît en survolant le menu. Pour info, le code de base de mon blog était :
    .tabs .widget li, .tabs .widget li {
    display: inline;
    float: none;
    }

    Aurais-tu une idée d'où vient le problème, une solution ?
    Merci d'avance ! :)

    RépondreSupprimer
    Réponses
    1. Salut !
      Pour pouvoir te répondre il faut que je regarde ton blog de plus près.
      Quelle est l'adresse ?

      Supprimer
    2. On ne sait jamais, mais cherches le code CSS suivant :

      .tabs .widget ul {
      overflow: visible;
      }

      Si tu ne le trouves pas, rajoutes le. Il permet de faire apparaître ce qui "débordes" du menu et par conséquent les sous-catégories ;)

      Supprimer
  2. Merci pour ta réponse ! Donc j'ai trouvé d'où vient le problème, et c'est effectivement un soucis de "débordement".
    C'est à dire que si j'agrandi l'espace entre la barre du menu et mon contenu, les sous menus se déroulent et s'affichent. Sauf que j'aimerais que ce qui "débordes" apparaisse pas dessus le contenu (et donc que je ne sois pas obligée d'agrandir l'espace).
    Et le code que tu m'as donné ne fonctionne pas :/

    RépondreSupprimer
    Réponses
    1. Pour voir d'où vient le problème il faudrait que je regardes ton code CSS. Pour ça il me faudrait l'adresse de ton blog.

      Supprimer
    2. Salut, j'ai peut-être une autre solution pour toi.

      Cherche le code qui commence par :

      .tabs-outer

      et ajoute le code suivant :

      overflow: visible;

      comme ceci :

      .tabs-outer {
      overflow: visible;
      }

      Supprimer
  3. Salam;

    qd je survol le bouton de mon menu le menu déroulant apparaît bien mais dès que j essai de cliquer sur l'une des sous catégorie ça disparaît

    RépondreSupprimer
    Réponses
    1. J'ai exactement la même chose je veux bien de l'aide aussi !

      Supprimer
    2. Salut Marion, j'ai pu regarder ton code.

      En fait, le lien de ta sous-catégorie est trop loin de ton menu. Quand tu déplaces la souris pour cliquer dessus, il disparaît. Pour régler ce problème, il faut supprimer la distance entre la barre des sous-catégories et le menu.

      Cherches le code CSS que tu as du ajouter lors du tutoriel :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 10px;
      margin-left: -15px;
      }

      On va modifier la valeur de margin-top à 0 pixels :

      margin-top: 0px;

      Ce qui donne :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px;
      }

      Si tu veux décaler la barre des sous-catégories de ton menu tu peux ajouter une marge à ton menu par exemple.

      Pour cela, cherches le code suivant :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      border: 0px;
      position: absolute;
      width: 150px;
      z-index:9999;
      }

      Et ajoutes le code suivant avant le "}" :

      padding-top: 10px;

      Comme ceci :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      border: 0px;
      position: absolute;
      width: 150px;
      z-index:9999;
      padding-top: 10px;
      }

      Changes le nombre de pixels comme tu le souhaite pour modifier la distance.

      Supprimer
    3. Je te remercie j'ai enfiiiiin reussi à trouver la solution !

      Supprimer
    4. Bonjour Catherine,
      J'ai exactement le même problème et j'ai suivi les instructions que tu as expliqué dans la réponse aux commentaires et j'ai toujours le même souci. Quand je clique sur un lien, mes sous-catégories sont trop à gauche et non en dessous du lien Catégorie 1.
      L'adresse de mon blog pour que tu visualises mon souci : http://gameofbeautymode.blogspot.fr/

      Merci d'avance pour ton aide.

      Supprimer
    5. RE - en faisant ton tutoriel "Mettre la barre de navigation en haut" le problème est résolu car j'ai copié ton nouveau code html. Désolée du dérangement. Bises

      Supprimer
  4. Super merci beaucoup !
    J'adore tes Tutos ils m'ont pas mal aider pour débuter, j’espère que tu en présenteras d'autres !

    RépondreSupprimer
  5. hello ma belle merci pour ces tutus, je viens de créer mon menu mais lorsque je clique sur une sous catégorie aucun article apparait , y a fil une solution avec les libellé ?

    RépondreSupprimer
    Réponses
    1. Salut Bbleu Citron !
      J'ai pu regarder un peu ton blog. Le problème ne vient pas de ton menu, il fonctionne très bien car quand on clique sur Maquillage > Peau ton article apparaît bien sous cette catégorie.
      Je pense donc que le problème viens de tes libellés. Vérifie bien les libellés que tu as ajouté à tes articles, qu'ils correspondent bien aux libellés des liens de ton menu.

      Supprimer
  6. Merci beaucoup pour toutes ces explications très claires!!!
    Ce n'est pas toujours le cas et jusque là, je n'avais pas compris comment mettre en place un menu déroulant!
    Maintenant c'est chose faite :-)
    Merci encore

    RépondreSupprimer
  7. J'ai reussit non pas sans mal a faire ma foutu barre de navigation cependant une chose me turlupine commet mettre une page vierge a une autre page ? Par exemple quand on se promene sur ma barre de navigation > MyLittleBox > Box d'octobre > ICI comment est il possible de mettre une page ici ?? je sais pas si je me fais bien comprendre

    RépondreSupprimer
    Réponses
    1. Salut Nessa, désolée mais je n'ai pas tout compris ^^'
      Tu souhaites ajouter un 2e menu déroulant quand tu survoles Box d'octobre ? Ou insérer un lien vers une page au lieu d'une catégorie ?

      Supprimer
    2. Merci cath j'ai trouver comment faire =)

      Supprimer
  8. Merci pour tous ces tutos :)
    Mais pour le menu déroulant, je bloque, ça fonctionne pas... Les sous-catégories ne veulent pas disparaitre, elle restent bien visible sous la catégorie correspondante. Une idée d'où peut venir le problème ? (Je l'ai enlevé sur mon blog, les sous catégories ne sont pas dans le widget pour le moment)

    RépondreSupprimer
    Réponses
    1. Salut Gwen,
      Pour que je puisse voir d'où vient le problème il faudrait que tu rajoutes le menu déroulant à ta barre de navigation :)

      Supprimer
    2. C'est fait ! :)
      Pour info, je ne trouve pas /* Content... Est-ce que ça vient de là ?

      Supprimer
    3. Ça pourrait venir de là. Si ces 2 lignes de commentaire :

      /* Content
      ---------------------------------------- */

      Ne se suivent pas alors ce qui est au-dessus ou en-dessous peut mal fonctionner.

      Et as-tu bien suivi le tutoriel de création de la barre de navigation ? Car il faut bien remplacer un certain code par celui de ta barre de navigation, sinon ça donne également des problèmes.

      Supprimer
  9. Bon du coup je l'ai enlevé... pas envie que ça reste trop longtemps :/
    Si tu me dis une heure, je le remets ! Sinon tant pis ^^

    RépondreSupprimer
    Réponses
    1. Désolée ! Je n'ai pas vu ton message hier, du coup je te propose d'y regarder ce soir 18h30 ça te va ?

      Supprimer
    2. Pas de problème :)
      Je remettrais le menu déroulant pour 18h30 alors, merci beaucoup !

      Supprimer
    3. As-tu mis le menu déroulant ?

      Supprimer
    4. Zut, complètement oublié hier soir, désolée >_<
      Je l'ai remis du coup !

      Supprimer
    5. Pas de soucis, je t'envoi un mail avec des images ça sera plus clair :)

      Supprimer
  10. Coucou désolé d'écrire si tard , mais j'ai passé ma soirée a trouver un code . Alors tout d'abord je vais dans le tableau de bord , puis dans modèle puis personnaliser, et je vais dans avancé pour trouver le truc où l'on met le code CSS . Quand je fais un copier coller de ce que tu as écrit ça ne marche pas rien ne s'affiche . Je ne sais pas si je me trompes quelques part ou si mon modèle n'est pas adapté bref j'ai vraiment besoin d'aide. Dans tout les cas ton article est super et ça aide beaucoup de personnes (quand ça marche ) .

    RépondreSupprimer
    Réponses
    1. En fait il ne faut pas aller dans "Personnaliser" mais dans "Modifier le code HTML" à partir de "Modèle". Il faut coller le code au dessus de /* Content dans la boîte de code qui apparaît.
      Tout est expliqué au début du tuto :)

      Supprimer
  11. Coucou, les tutos sont super pour debuter. Mais j'ai un petit soucis. Quand je clic sur le fleche noir ligne 13 et que je clic n'importe où pour ouvrir une boite de dialogue. Je ne trouve pas le code : .tabs .widget li, .tabs .widget li { Que se passe t'il ? Je ne comprends pas.

    RépondreSupprimer
    Réponses
    1. As-tu créé ton menu avec mes tutoriels pour créer et personnaliser sa barre de navigation ?
      Si ce n'est pas le cas, alors c'est normal que tu ne trouves pas le code. Tu peux trouver le lien vers les tutoriels au début de cet article ;)

      Supprimer
  12. Coucou j'aime beaucoup les tutos que tu a fait cela m'a beaucoup aidé. J'ai un petit problème j'ai réussi a faire des sous-catégories mais je n'arrive pas a ajouter mes articles dans les sous-catégories créer aurais tu une idée de comment je pourrais faire s'il te plait.

    RépondreSupprimer
    Réponses
    1. Bonjour C&C,
      Si tu veux que ta sous-catégorie affiche tous les articles "Soins", par exemple, il faudra sur la page de création de chaque article indiquer le libellé "Soins" (à droite de l'écran).
      De plus, le lien de ta sous-catégorie devra s'écrire :
      http://naturalandsister-connect.blogspot.fr/search/label/Soins
      Ne pas oublier le "search/label/" avant le libellé ;)

      Supprimer
    2. Merci énormément ça a fonctionné !!!! :-) Tu es géniale encore merci!!!!

      Supprimer
  13. Bonjour Cath, j'adore vraiment les tutos que tu nous proposes. Cela m'aide énormément à créer mon site en tant que débutante. Cependant, après avoir créer un menu déroulant, je me suis aperçu qu'il m'en fallait un deuxieme. Mais je ne trouve pas la solution. Aurais-tu un conseil à me donner ? Merci.

    RépondreSupprimer
    Réponses
    1. Salut Kelly,
      Veux-tu créer un nouveau menu déroulant sur un autre lien de ton menu ? Ou un 2e menu autre part sur ton site ?

      Supprimer
    2. Bonjour Cath, j'aimerais creer un 2eme menu deroulant sur un autre lien de mon menu.

      Supprimer
    3. Pour créer un 2e menu déroulant il suffit de rajouter le code du menu déroulant :

      <ul>
      <li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
      <li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
      </ul>

      entre le </a> et </li> du lien sous lequel tu souhaites qu'il apparaisse, comme ceci :

      <li><a title="Catégories" href="#">Catégories</a>
      <ul>
      <li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
      <li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
      </ul>
      </li>

      Tu peux le faire pour n'importe quel lien de ton menu :)

      Supprimer
  14. Bonjour, merci beaucoup pour ce tutoriel (et pour l'ensemble du blog !). j'ai un petit problème avec les catégories, elles s'affichent non pas en dessous de leur titre mais tout à gauche de la barre de navigation. Ai-je loupé quelque chose ?

    RépondreSupprimer
    Réponses
    1. Bonjour Béné,

      Il suffit de changer une ligne de code.
      Vers la ligne 320 de ton code tu devrais trouver ceci :

      .tabs .widget li, .tabs .widget li {
      margin-left: 13px;
      margin-right:13px;
      display: inline;
      float: none;
      }

      Change la valeur de display de "inline" à "inline-block", comme ceci :

      .tabs .widget li, .tabs .widget li {
      margin-left: 13px;
      margin-right:13px;
      display: inline-block;
      float: none;
      }

      Et ça devrait régler ton problème :)

      Supprimer
    2. En effet c"'est rentré dans l'ordre ! Je n'y avais pas pensé. Merci :)

      Supprimer
  15. Bonjour, merci pour tout tes merveilleux tutos ! Par contre, j'ai un petit problème : les sous-catégories s'affichent dans mon menu...
    Que dois-je faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Angéla,
      As-tu bien ajouté le code CSS pour le menu déroulant comme expliqué ? Car il défini le visuel des menus déroulants et donc le fait qu'ils n'apparaissent que quand on survol le lien donné.

      Voici le code CSS pour les menus déroulants, rajoutes-le après le code CSS de ta barre de navigation :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
      }

      .tabs .widget li li {
      display: block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 150px; /* Largeur de la barre des sous-catégories */
      }

      .tabs .widget li:hover li a {
      background-color: #C49DB8; /* Couleur du fond du lien */
      }

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }

      .tabs .widget ul ul a {
      color: #ffffff; /* Couleur des liens */
      }

      .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #B061A2; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Il te faudra modifier les couleurs des liens et du fond des liens de menu déroulant.

      Supprimer
    2. Merci merci merci 100 000 000x merci !!!

      Supprimer
    3. Bonjour j'ai le même problème (je crois), les sous catégories s'affichent en une même ligne sous les catégories. Que faire ?
      http://lejournaldethais.blogspot.fr/
      D'avance, merci

      Supprimer
    4. Salut Thaïs,
      Je suis allée voir ton blog mais je ne vois pas les sous-catégories de ton menu. Seulement les liens principaux. :/

      Supprimer
    5. Oui, en fait je t'avais laissé un second commentaire en te disant que quelques heures plus tard j'enlevais le menu déroulant parce que ça avait rendu mon blog tout foutoir et ça m'agaçait ^^ mais internet a buggé et puis je suis partie me coucher. Du coup je vais faire un nouvel essai aujourd'hui.
      Merci d'avoir pris la peine d'aller voir :) je vais m'appliquer un peu plus aujourd'hui. Merci pour tes tutoriaux en tout cas, de prendre la peine d'expliquer et de répondre aux commentaires.

      Supprimer
  16. Merci pour ce magnifique tuto... Mon blog devient de plus en plus beau, et ce grâce à toi.
    Juste une petite question => comment fait-on pour insérer une petite flèche sur la gauche de la catégorie pour montrer que le menu est déroulant?

    Merci à toi.

    Marc,

    Mon blog : www.myhomestory.eu

    RépondreSupprimer
    Réponses
    1. Bonjour Marc,

      Tu peux utiliser le tutoriel suivant qui explique comment ajouter une image à la barre de navigation. Tu peux ainsi ajouter une image de flèche ou même simplement le caractère > avant chaque lien qui contient un menu déroulant :)

      http://ladybirdr.blogspot.com/2014/10/ajouter-des-images-la-barre-de.html

      Supprimer
  17. Merci j'ai réussi ! Super conseils et très bien expliqués en plus :)
    bisous

    RépondreSupprimer
  18. Youpi j'ai tout réussi ! merci c'est tellement bien expliqué !!

    RépondreSupprimer
  19. Hello ! Je tiens à te remercier pour tout tes supers tutos ! Je voulais modifier un peu l'apparence de mon blog pendant cette fin d'année et je suis tombée sur ton blog. J'ai pu faire tout ce que je voulais, j'ai notamment installé les boutons réseaux sociaux, personnaliser les commentaires et mettre l'en-tête de la date en format "cercle".
    J'avais aussi refait mon menu déroulant en me servant de tes tutoriels, et c'est ce dernier qui me pose un soucis. Sur la barre il y a 4 catégories qui s'affichent, alors que dans le code HTML j'en ai écris 6. Au départ, elles s'affichaient toutes, mais depuis que j'ai installé les parties déroulantes il n'y en a plus que quatre qui s'affichent. Je ne sais pas d'où cela vient. Les deux "titres" manquant je ne les veux pas déroulant, est-ce à cause de cela ? Oubien est une sorte de problème de largeur à agrandir quelque part ?
    J'aurai aussi une autre question, j'aurai aimé centrer les liens du menu déroulant, j'y étais arrivé puis j'ai changé d'avis et maintenant je ne me souviens plus où il faut bidouiller ^^. Ah et j'aurai voulu que la police de la partie déroulante (pas de la barre) soit en minuscules. Est-ce possible ?

    Je suis conscience de t'avoir posé 1001 questions, et j'en suis désolé, si tu ne peux pas répondre, je comprendrai. :)

    RépondreSupprimer
    Réponses
    1. Salut Samia !
      Pour ton menu il y a avait une petite erreur dans ton code HTML.
      Remplaces le code HTML de ton menu par celui-ci :

      <div id="barre_nav">
      <ul>
      <li><a title="A propos" href="Lien">A Propos</a>
      </li>
      <li><a title="Beauté &amp; Bien-être" href="#">Beauté &amp; Bien-être</a>
      <ul>
      <li><a href="http://www.lesideesdesamia.com/p/mes-secrets-cosmetiques-pourprendre.html#.VKY6Tsny3Co">Recettes cosmétiques</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/p/mes-secrets-cosmetiques-pourprendre.html#.VKY6Tsny3Co">Secrets de beauté</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/Analyse%20de%20composition?&amp;max-results=10#.VKY7osny3Co">Analyse de compositions</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/Tisane?&amp;max-results=10">Idées de tisanes</a>
      </li>
      </ul>
      </li>
      <li><a title="Défis écolos" href="#">Défis écolos</a>
      <ul>
      <li><a href="#">2015</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/D%C3%A9fis?&amp;max-results=10">2014</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/D%C3%A9fis?&amp;max-results=10">2013</a>
      </li>
      </ul>
      </li>
      <li><a title="Maison &amp; Déco" href="#">Maison &amp; Déco</a>
      <ul>
      <li><a href="http://www.lesideesdesamia.com/search/label/Upcycling?&amp;max-results=10">Objets Upcyclés</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/Peinture?&amp;max-results=10">Les DIY déco</a>
      </li>
      <li><a href="http://www.lesideesdesamia.com/search/label/Conseils_D%C3%A9coration?&amp;max-results=10">Conseils aux novices</a>
      </li>
      </ul>
      </li>
      <li><a href="Lien">Index</a>
      </li>
      <li><a href="Lien">Bric à Brac</a>
      </li>
      <li>
      <img src="http://4.bp.blogspot.com/-h4Lr5U7W5TI/VDvLlswUFJI/AAAAAAAACGc/NcT1l-uzOhk/s1600/mail.png"><a href="#">Contact</a>
      </li>
      </ul>
      </div>

      Et ça réglera le problème des liens manquants :)

      Ensuite pour centrer les liens de tes menus déroulants et les mettre en minuscules, cherches le code CSS commençant par :

      .tabs .widget li ul a {

      Tu devrais trouver ceci :

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      text-align: left;
      }

      Remplace les 2 dernières lignes du code par ces 3 lignes :

      padding-left: 0;
      text-align: center;
      text-transform: initial;

      Comme ceci :

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 0;
      text-align: center;
      text-transform: initial;
      }

      Et voilà ! ;)

      Supprimer
    2. Je te remercie, je vais faire les changements dès que j'en aurai le temps. Encore merci beaucoup !! :-)

      Supprimer
  20. MERCI ! Top clair, top résultat !
    Si le coeur t'en dit, voici ton oeuvre en direct-live : www.happenstance.ch !
    MERCIIIIIIIIIIIIIIIIIIIII :)

    RépondreSupprimer
  21. Salut, j'essaie tant bien que mal de coder mon menu déroulant, malheureusement, lorsque je vais dans mise en page, je n'ai pas de page HTML/Javascript mais "Pages" de ce fait ce n'est pas du codage HTML mais des Widgets. Tu as une solutions :)

    http://the-melting-pop.blogspot.be/

    Jay

    RépondreSupprimer
    Réponses
    1. Salut Jay,

      Le plus simple, je pense, c'est de créer ton menu en HTML. Pour cela tu peux copier le code qui existe déjà pour ton menu, qui est :

      <ul>
      <li class="selected"><a href="http://the-melting-pop.blogspot.be/">Accueil</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/Art">Art</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/LGBT">LGBT</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/lifestyle">Lifestyle</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/mode">Mode</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/music">Musique</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/search/label/Tvshow">TV Show</a></li>
      <li><a href="http://the-melting-pop.blogspot.be/p/contact.html">A propos ♫ </a></li>
      </ul>

      Et l'intégrer dans le code pour le menu en HTML/Javascript. Tu trouveras toutes les infos pour le créer dans ces tutos :

      http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  22. Merci ma belle pour ce tuto je teste tout tes tutos du coup on dirait que j'ai un blog de pro ^^
    laxpetitexmodeuse.blogspot.fr

    RépondreSupprimer
  23. Bonjour,
    Et merci pour ce super blog très didactique!

    J'ai suis en train de construire l'apparence de mon blog et j'ai suivi le tuto pour faire des menus déroulants. Ça fonctionne mais j'ai néanmoins un problème.

    Quand je passe la souris sur la catégorie, les sous-catégories s'affichent bien.
    MAIS, quand je descends doucement la souris, les sous-catégorie disparaissent.

    J'ai surement raté quelque chose mais je ne vois pas quoi?!

    D'avance merci,
    Adrien

    http://e-z-photo.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Salut Adrien,

      Quand j'essaye de mon côté ça fonctionne bien :)

      Supprimer
  24. Du coup, j'ai essayé sur un autre PC, sur Chrome et IE. Ca fait la même chose.
    Il faut descendre très doucement la souris.

    Sinon, essayez de monter/descendre de la catégorie à la 1er sous-catégorie, une dizaine de fois, parfois ce ne s'affiche pas.
    C'est le genre de petit défauts qui peuvent vraiment frustrer les visiteurs.

    De plus, j'ai remarqué, que la bordure droit de la 1ere sous-catégorie de "Lumère" et "Composition" ne s'affichent pas. Peut-etre est-ce lié?!

    RépondreSupprimer
  25. Bonsoir
    Je viens d'essayer de créer ma barre d'onglets en copiant le code que tu donnes à la fin mais mes titres sont encadrés je n'arrive pas à l'enlever, comment je peux faire ?
    Merci d'avance
    Charlotte

    RépondreSupprimer
    Réponses
    1. Bonsoir Charlotte,

      Le code à la fin n'est pas le code pour le menu déroulant, c'est le code que j'ai utilisé pour le menu de base seulement. Pour le code CSS du menu déroulant il faut suivre les codes au-dessus comme expliqué dans le tutoriel :)

      Supprimer
  26. Bonjour.

    Tout d'abord, merci pour ces superbes tutos : clair, imagé. On a tout pour réussir un super site!

    J'ai créer ma barre de navigation et je l'ai personnalisé. J'ai réussir à obtenir la largeur (hauteur) que je désirais mais le texte reste positionner en haut. Comment puis je faire pour qu'il soit centrer verticalement ?

    RépondreSupprimer
    Réponses
    1. Bonjour Shukia,

      Tu peux ajouter un espace au-dessus des liens en ajoutant la ligne suivante :

      margin-top: 5px;

      Au code commençant par :

      .tabs-inner .widget ul {

      Change la valeur (5px) en l'augmentant ou en la diminuant pour obtenir ce que tu souhaites. Tu peux prévisualiser le changement avant de sauvegarder en cliquant sur "Prévisualiser le modèle" au-dessus de la boîte de code :)

      Supprimer
  27. Ah ok, je vais suivre le tuto pas à pas mais les encadrés autour de mes liens comment je peux faire pour les enlever ?
    Merci

    RépondreSupprimer
    Réponses
    1. Je ne trouve plus tes liens sur ton blog donc je ne peux pas te donner le code exacte mais essaye d'ajouter dans le code commençant par :

      .tabs-inner .widget li a {

      La ligne suivante :

      border: none;

      Ça devrait régler le problème :)

      Supprimer
    2. Je vais essayer ça ! oui j'ai un peu tout supprimer de ce qu'il y avait sur mon blog mis à part mes articles je voudrais refaire le design de a à z mais je n'arrive pas à trouver un moyen de remettre en quelque sorte les paramètres par défaut de design

      Supprimer
  28. Me voilà bien embêtée, étant donné que je veux garder la configuration de la barre de navigation je ne trouve pas le code dont tu parles au début du tuto! du coup je me retrouves avec une barre et toutes mes sous catégories en vrac... c'est moche et bien loin du menu déroulant que je recherchais! Est ce que tu peux me dire la marche à suivre si possible?
    le lien de mon blog le voici ( je l'ai détaché de mon google plus donc je pense qu'il n'est plus rattaché à mon nom) http://vousreprendrezbien1kilo.blogspot.fr/
    Merci d'avance!
    Laure

    RépondreSupprimer
    Réponses
    1. Bonjour Laure,

      As-tu suivi le tutoriel sur la personnalisation de ton menu ? Car il met en place les codes de base du menu dont celui du début, c'est donc normal que tu ne le trouves pas :)

      Tu peux trouver le tutoriel ici : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Si tu ne veux pas faire le tutoriel tu peux toutefois ajouter les codes que tu ne trouves pas avant la ligne :

      /* Columns

      Supprimer
    2. Salut catherine! J'ai finalement suivi le tuto n°2 pr la barre de navigation je suis presque satisfaite du résultat, par contre il y a vraiment un truc que j'ai du faire de travers car j'ai mon menu avec les catégories déroulantes mais quand je clique dessus, rien ne se passe !
      Avant quand je cliquais sur "envie sucrée" j'avais les articles avec le libellés sucré. la rien! Et j'ai mis un libellé cèeme dans un de mes articles pour voir si il s'affichait dans une de mes sous catégories et rien non plus. Il y a t-il qque chose que j'aurais désactivé ? Faut dire que je suis pas très douée aussi hein ;-)
      J'ai tout laissé tel quel sur le site au cas ou tu aies besoin d'aller voir.
      Merci !
      Laure

      Supprimer
    3. En fait les adresses url pour tes catégories ne sont pas correctes.
      Le lien doit être de ce type :
      "http://vousreprendrezbien1kilo.blogspot.fr/search/label/libellé"

      Tu as bien mis le nom du libellé à la fin de l'adresse mais il manque la partie "search/label/" juste avant. Il te suffit de rajouter ce code à tes liens dans le code HTML de ton menu et ça devrait marcher :)

      Pour le lien "Envie sucrée" le lien actuel est "#", c'est pour cela que rien ne se passe. Remplace "#" dans le code HTML de ton menu par le lien vers le libellé de ton choix :)

      Supprimer
    4. C'est ce que je m'étais dis pour le search/label, mais je préférai demander au risque de faire une connerie. Tu as une patience de folie pour répondre et résoudre les soucis des gens, franchement bravo ! Et puis un grand merci aussi bien entendu !

      Supprimer
  29. Bonjour , J'aimerais faire ceci pour mon blog mais je n'arrive pas a mettre plusieur catégories et sous catégories a la place de pinterest par exemple refaire une catégories .
    Comment dois je faire depuis se matin j'essaye impossible sa se met en dessous :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le code d'une liste de liens doit commencer par :

      <ul>

      et finir par :

      </ul>

      A l'intérieur de ces 2 codes on trouve les liens qui s'écrivent comme ceci :

      <li><a href="http://adressedublog.fr/souscatégorie1">Lien</a></li>

      Avec <li> avant le lien et </li> après le lien.

      En fait notre menu est une liste de liens. Pour créer une liste déroulante de liens on ajoute une liste de liens à l'intérieur d'un lien.

      On ajoute donc une nouvelle liste :

      <ul>
      <li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
      <li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
      </ul>

      Dans le code du lien (Pinterest par exemple) avant son </li> comme ceci :

      <li><a href="http://adressedublog.fr/souscatégorie1">Pinterest</a>

      <ul>
      <li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>
      <li><a href="http://adressedublog.fr/souscatégorie2">Sous Catégorie 2</a></li>
      </ul>

      </li>

      J'ai ajouté des espaces autour de la nouvelle liste pour bien voir qu'il se trouve dans le code du lien Pinterest, avant le </li>

      Il suffit de faire ceci pour chaque lien auquel tu veux ajouter une liste déroulante :)

      Supprimer
    2. Je vais essayer merci beaucoup :)

      Supprimer
  30. J'ai fais comme tu m'a dis j'ai encore des soucis :(
    Le fond est blanc je n'arrive pas a faire normal et pour centrer impossible je ne trouve pas le code " .tabs .widget li, .tabs .widget li { "

    http://doux-bonheurs.blogspot.fr/

    Merci de ta réponse

    RépondreSupprimer
    Réponses
    1. Tout d'abord rajoutes ce code avant le code pour ton menu :

      <div id="barre_nav">
      <ul>

      Et ajoutes ce code après le code de ton menu :

      </ul>
      </div>

      Ajoute ensuite le code CSS du menu déroulant donné dans le tutoriel.
      Si tu ne trouves pas le code :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Ajoutes-le à la fin du code CSS du menu déroulant par exemple.

      Supprimer
    2. Je voudrais un fond pas laisser en blanc et les sous catégories reste afficher , je sais pas comment faire ?

      Supprimer
    3. Voici le code mis :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
      }

      .tabs .widget li li {
      display: block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 150px; /* Largeur de la barre des sous-catégories */
      }

      .tabs .widget li:hover li a {
      background-color: #C49DB8; /* Couleur du fond du lien */
      }

      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }

      .tabs .widget ul ul a {
      color: #ffffff; /* Couleur des liens */
      }

      .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #B061A2; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }
      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Je pense qui faut que je règle les couleurs parceque sa fait blanc avec des trait ...

      http://doux-bonheurs.blogspot.fr/

      Supprimer
    4. Oui il faut maintenant que tu changes les couleurs dans ce code mais il faut aussi que tu ajoutes le code CSS qui définit l'apparence de ton menu en général. Toutes les explications sont dans la partie 2 du tutoriel de la barre de navigation : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
    5. J'ai essaye de faire mais pour la barre de navigation y manquer plein de truc donc je suis revenu sur la menu déroulant y a rien qui change :(
      http://doux-bonheurs.blogspot.fr/

      Supprimer
  31. Coucou j'ai réussi a faire j'ai juste pas réussi a mettre un fond :/

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Tout d'abord, tu as mis 2 fois le code CSS du menu déroulant. Il faudrait que tu en supprimes une car sinon le navigateur ne saura plus ce qu'il doit afficher.

      Pour la barre de navigation, il y a quelques erreurs. Les code CSS doivent toujours être entourés de { et }
      Tout ce qui se trouve en dehors, ou si il manque un des 2 signes, alors les codes ne seront pas pris en compte.

      Pour l'instant ton code ressemble à ceci :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      }
      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      }
      margin-top: none;
      margin-bottom: none;
      border-bottom: none;
      border-bottom-color: #c7b1a71;
      border-bottom-width: 2px;
      border-top: none
      border-top-color: #90E4FC
      border-top-width: 1px;
      }
      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Corsida;
      font-size: 14px;
      font-style: normal;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 1px;
      color: #4BB5C1;
      margin-right: 20px;
      }
      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }
      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      }
      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }
      display: inline;
      float: none;

      Remplaces-le par :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      }

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      background-color: #C7B1A7; /* Couleur du fond de la barre de navigation */
      }

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Corsida;
      font-size: 14px;
      font-style: normal;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 1px;
      color: #4BB5C1; /* Couleur des liens */
      margin-right: 20px;
      background-color: #C7B1A7; /* Couleur du fond du lien */
      }

      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: #4BB5C1; /* Couleur des liens quand survolés par la souris */
      background-color: #EEE7E4; /* Couleur du fond des liens quand survolés par la souris */
      }

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }

      En changeant la valeurs des couleurs là où il y a les commentaires.

      Supprimer
    2. J'ai copier coller directement ce que tu m'a donner ce qui donne :

      /* Apparence du menu déroulant */
      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      }
      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      }
      margin-top: none;
      margin-bottom: none;
      border-bottom: none;
      border-bottom-color: #c7b1a71;
      border-bottom-width: 2px;
      border-top: none
      border-top-color: #90E4FC
      border-top-width: 1px;
      }
      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Corsida;
      font-size: 14px;
      font-style: normal;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 1px;
      color: #4BB5C1;
      margin-right: 20px;
      }
      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }
      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      }
      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }
      display: inline;
      float: none;
      Remplaces-le par :
      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      }
      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      background-color: #C7B1A7; /* Couleur du fond de la barre de navigation */
      }
      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Corsida;
      font-size: 14px;
      font-style: normal;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 1px;
      color: #4BB5C1; /* Couleur des liens */
      margin-right: 20px;
      background-color: #C7B1A7; /* Couleur du fond du lien */
      }
      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }
      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      color: #4BB5C1; /* Couleur des liens quand survolés par la souris */
      background-color: #EEE7E4; /* Couleur du fond des liens quand survolés par la souris */
      }
      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }
      /* Content
      ----------------------------------------------- */
      body {



      Mais la barre n'es plus centré et les couleurs ne se mettre pas , je suis perdu pour sa :/

      Supprimer
    3. http://doux-bonheurs.blogspot.fr/

      Supprimer
    4. http://doux-bonheurs.blogspot.fr/

      Sa me tout mis bisard y a plus rien correctement la , c'est en verre souligné j'y comprend plus rien :/

      Supprimer
    5. Et j'ai un autre soucis mes article sont devenu moche :/
      http://doux-bonheurs.blogspot.fr/2015/02/doux-petit-bonheurs-o8.html

      Y a plus la couleur d'écriture .. depuis que j'ai changer le code hier :(

      Supprimer
    6. Je sais pas combien je t'ai laissé de commentaires , je dois te rendre folle a force :/ , j'ai réussi a modifier comme je voulais y me reste juste de petit problème la barre de navigation n'est pas centré et quand je met le code pour centrer sa me centre mais met tout les un en dessous les autres et quand je pose la souris sur un lien le menu se déroule à gauche , je voudrais laisser comme c'est juste que se soit centrer seulement :/ Et aussi j'ai enlever le code ccs que j'avais en double et depuis mes article et mes commentaires n'ont plus la couleur et l'écriture que j'avais mis et j'arrive pas a trouver ou faut je change le code couleur pour mes article et les commentaires . Les deux derniers problèmes qui me reste sont cela j'espère que en remodifiant je n'en aurait pas de nouveau :/ , Je laisse comme si jusqu'à ce que je voit ta réponse a mes problème.
      Merci encore de m'accorder autant de temps c'est très gentil de ta part.

      Supprimer
  32. Bonjour , voila j'ai un peu réussi comme je voulais : http://doux-bonheurs.blogspot.fr/

    Je veux juste qu'il soit centré pour les couleurs je vais relire tranquillement est essayer de remettre :)

    RépondreSupprimer
    Réponses
    1. J'ai toujours mon problème pour centrer la barre et les couleurs des articles qui sont partis : http://doux-bonheurs.blogspot.fr/
      Je n'ai toujours pas trouvé merci de ton aide :)

      Supprimer
    2. Bonjour,
      Bizarrement certains codes CSS ne sont pas pris en compte.
      Vas dans Modèle et cliques sur Modifier le code HTML. Clique n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps (ou Cmd et F sur Mac). Dans la boîte de recherche qui apparaît en haut à droite colle le code suivant :

      /* Apparence du menu déroulant */

      Supprime le signe } qui se trouve juste au-dessus de cette ligne :

      }
      /* Apparence du menu déroulant */

      Pour donner :

      /* Apparence du menu déroulant */

      Cherches aussi le code suivant :

      /* Police et Couleur des Liens */

      Et supprimes également le signe } juste au-dessus.

      Cherches ce code :

      }ent.shadow.spread) 0 0;

      Et supprime cette ligne.


      Ensuite colle le code suivant dans la boîte de recherche :

      .tabs .widget li, .tabs .widget li {

      Tu dois trouver ce code :

      .tabs .widget li, .tabs .widget li {
      display: inline;
      }

      Remplace seulement ce code par celui-ci :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none !important;
      }

      Ton menu devrait être centré maintenant.

      Dis-moi quand tu as fait ces changements pour voir ce que ça donne.

      Supprimer
    3. Merci beaucoup de ta réponse , mon menu est parfait a présent :)
      Y me reste juste un petit soucis pour mes articles je ne trouve pas ou remettre la couleurs :/ et l'écriture aurais tu une idée ?
      Merci encore tes adorable

      Supprimer
  33. Bonjour, j'ai un problème dans mon menu et dans mon menu déroulant les sous catégories sont séparées par des pointillés, j'aimerai les enlever, comment faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Okane,

      Vas dans Modèle puis Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin> puis appuies sur Ctrl et F en même temps.
      Dans la barre de recherche qui apparaît en haut à droite de la boîte de code colle ceci :

      .tabs .widget li, .tabs .widget li {

      Tu devrais trouver le code suivant :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Ajoutes la ligne suivante avant le signe } :

      border-top: none;

      Comme ceci :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      border-top: none;
      }

      Et ça devrait régler le problème :)

      Supprimer
  34. J'ai aussi un probleme au niveau de mes articles qui ne sont pas centrés ? merci beaucoup pour les tutos

    RépondreSupprimer
    Réponses
    1. Pour centrer tes articles colles le code suivant dans la boîte de recherche :

      /* Content

      Avant cette ligne, colles le code suivant :

      .column-center-outer {
      width: 97%;
      margin-left: 20px;
      }

      Ça devrait régler le problème :)

      Supprimer
  35. Bonjour, je souhaiterais savoir s'il est possible de faire en sorte que le liens apparaisse en gras lorsqu'il est survolé par la souris ?
    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Retrouves le code suivant :

      .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #B061A2; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Et ajoutes cette ligne avant le signe } :

      font-weight: bold;

      Et voilà :)

      Supprimer
  36. Bonjour, je viens de tomber sur votre site, et franchement MERCI BEAUCOUP! J'essaie d'organiser au mieux mon blog, mais c'est loin d'être simple. J'ai donc commencé a faire un menu déroulant mais je bloque... Je m'explique, je voudrais avoir dans mon menu une catégorie "pays", avec une plusieurs sous catégories "argentine", "chili", "bolivie", etc... et dans ces sous catégories insérer plusieurs articles qui sont déja dans mon blog... Mais je ne sais pas comment faire... Je ne sais pas si j'ai été très claire, l'adresse de mon blog : bibouillenvadrouille.blogspot.fr
    Merci pour votre aide...
    Vivi

    RépondreSupprimer
  37. Rebonjour, je viens de vous laisser un commentaire, je pensais avoir trouvé ma solution mais là je ne comprends plus rien... Voilà que je n'ai plus que deux catégories qui apparaissent dans mon menu, la catégorie "pays" apparait en sous catégorie de "présentation et préparatifs, et les catégories "carte, ou sommes nous" et "vidéos" n'apparaissent plus.

    Et j'ai beau me creuser la tête, je ne comprends pas d'ou viens l'erreur...
    Svp, help me!!!

    Merci beaucoup par avance...
    bibouillenvadrouille.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour vivi,
      C'est à cause d'une petite erreur/faute de frappe. Le code du lien Pays et son menu déroulant se trouvent dans code du menu déroulant du lien Présentation et préparatifs.
      Le code du la barre de navigation actuelle est :

      <ul>
      <li><a title="Accueil" href="http://bibouillenvadrouille.blogspot.fr/">Accueil</a></li>
      <li><a title="Présentation et préparatifs" href="#">Présentation et préparatifs</a><ul>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013_03_01_archive.html">Qui sommes nous?</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/notre-bibouille.html">Le camion</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/permis-vacances-travail-pvt_7.html">PVT Argentine</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/transport-en-cargo.html">C'est décidé, on y va en cargo!</a></li>
      <li><a title="Pays" href="http://bibouillenvadrouille.blogspot.fr/">Pays</a><ul>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/search/label/Argentine">Argentine</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/search/label/Chili">Chili</a></li>

      <li><a title="Carte, où sommes nous?" href="http://bibouillenvadrouille.blogspot.com/feeds/posts/default">Carte, où sommes nous?</a></li>
      <li><a title="Vidéos" href="http://bibouillenvadrouille.blogspot.fr/search/label/Vid%C3%A9os">Vidéos</a></li>
      </ul>
      </li></ul></li></ul>

      Remplacez-le par :

      <ul>
      <li><a title="Accueil" href="http://bibouillenvadrouille.blogspot.fr/">Accueil</a></li>
      <li><a title="Présentation et préparatifs" href="#">Présentation et préparatifs</a><ul>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013_03_01_archive.html">Qui sommes nous?</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/notre-bibouille.html">Le camion</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/permis-vacances-travail-pvt_7.html">PVT Argentine</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/2013/07/transport-en-cargo.html">C'est décidé, on y va en cargo!</a></li></ul>
      </li><li><a title="Pays" href="http://bibouillenvadrouille.blogspot.fr/">Pays</a><ul>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/search/label/Argentine">Argentine</a></li>
      <li><a href="http://bibouillenvadrouille.blogspot.fr/search/label/Chili">Chili</a></li>

      <li><a title="Carte, où sommes nous?" href="http://bibouillenvadrouille.blogspot.com/feeds/posts/default">Carte, où sommes nous?</a></li>
      <li><a title="Vidéos" href="http://bibouillenvadrouille.blogspot.fr/search/label/Vid%C3%A9os">Vidéos</a></li>
      </ul>
      </li></ul>

      Ça devrait régler le problème :)

      Supprimer
    2. Un vrai génie que vous êtes! Merci ça fonctionne... Je vais pouvoir continuer a améliorer mon blog! Et votre blog est parfait pour ça! Merci encore
      Vivi

      Supprimer
  38. Bonjour,
    Pour commencer , merci et bravo pour toute l'aide apportée dans ces tutos.
    J'ai un soucis, j'ai suivi les conseil pour pouvoir avoir un menu déroulant. Même si je n'ai pas fini de le mettre en place, il fonctionne. Mon soucis vient du fais que je n'ai plus de barre de navigation dans la version mobile.
    Je veux bien un peu d'aide ou un petit tuyau.
    :)
    Bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Sam,
      Pour afficher le menu dans la version mobile vas dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin> puis cliques n'importe où dans la boîte de code. Appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît colles ceci :

      HTML3

      Tu devrais trouver un code comme ceci :

      <b:widget id='HTML3' locked='false' title='' type='HTML'>...</b:widget>

      Ajoutes ceci :

      mobile='yes'

      Après :

      type='HTML'

      Comme ceci :

      <b:widget id='HTML3' locked='false' title='' type='HTML' mobile='yes' >...</b:widget>

      Sauvegardes. Ensuite retournes sur Modèle et cliques sur le petit rouage sous l'aperçu mobile.
      Sous Choisir un modèle mobile, choisis Personnaliser. Sauvegardes, et ton menu devrait apparaître.
      Il se peut que tu aies à ajuster l'apparence du menu sur mobile. Pour cela il suffit de reprendre les mêmes codes CSS utilisés pour ton menu, en ajoutant .mobile devant chaque début de ligne. Comme ceci :

      .mobile .tabs .widget li ul {

      Et voilà ! :)

      Supprimer
    2. Merci Catherine, c'est super cool. :)
      J'ai encore un petit soucis, mais j'essaye de trouver la solution ...

      Supprimer
  39. Bonjour, j'ai créé mon blog il y a peu, et je n'ai pas réussi à mettre un menu déroulant au moment de la création. Entre temps j'ai quand même ajouté des pages mais j'aimerais y rajouter des articles dans ses pages. Est ce trop tard pour installer un menu déroulant malgré des articles déjà crée et comment ajouter des articles dans les pages si il n'y a pas de menu déroulant. Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Kayla,
      Tu peux créer ton menu (barre de navigation et menu déroulant) quand tu le souhaites, c'est encore plus simple quand les articles et pages existent déjà.
      Par contre tu ne peux pas ajouter des articles dans des pages. Si tu veux créer un lien dans ton menu qui renvoi vers des articles spécifiques (beauté par exemple) il faut utiliser les libellés. Associe un libellé (beauté par exemple) à tous les articles que tu souhaites regrouper. Ensuite dans ton menu tu n'auras qu'à ajouter le lien vers la recherche de ce libellé.

      Dans mon menu par exemple, le lien Customiser son Blogger renvoie vers tous les articles associés à ce libellé, et le l'adresse URL de ce lien est : http://ladybirdr.blogspot.fr/search/label/Customiser%20son%20Blogger
      Pour trouver l'adresse url d'un libellé, tu peux aller voir mon tutoriel sur la création de la barre de navigation : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html

      Supprimer
    2. Bonjour, Merci pour bien pour ton aide.

      Supprimer
  40. bonjour,
    J'ai réussit à creer le menu déroulant mais je voulais savoir s'il était possible de réduire la police uniquement des sous catégorie parceque lorsque que le menu ce déroule cela prend trop de place (mais en contre partie j'aime que le menu soit en gros caractère)
    en tout cas merci pour ce tuto

    RépondreSupprimer
    Réponses
    1. Bonjour Kelly,
      Oui c'est possible, il suffit de retrouver ton code CSS suivant :

      .tabs .widget ul ul a {
      color: #603cb4;
      }

      Juste au-dessus du signe } rajoutes la ligne suivante :

      font-size: 28px; /* Taille de la police du menu déroulant */

      Tu peux changer la taille de la police en augmentant ou diminuant le valeur de 28px.

      Et voilà ;)

      Supprimer
  41. Bonjour,
    Merci pour ce tutoriel très bien expliqué ! J'ai de mon côté un petit problème: les sous-catégories s'affichent à droite de leur lien et j'aimerai qu'elles s'accrochent en dessous !
    Si vous aviez le temps de passer sur mon blog pour voir ça, vous me seriez d'une grande aide: www.bobandlila.blogspot.com

    En espérant avoir de vos nouvelles :)

    RépondreSupprimer
    Réponses
    1. Bonjour Loly,
      Retrouves ton code suivant :

      #cssnav li:hover ul {
      display: inline-block;
      margin-right: 13px;
      margin-left: 13px;
      float: none;
      }

      Et remplaces-le par :

      #cssnav li:hover ul {
      display: inline-block;
      margin-right: 0;
      margin-left: -74px;
      float: none;
      }

      Tes menus déroulant seront centrés :)

      Supprimer
  42. Merci beaucoup, ça marche ! :)

    RépondreSupprimer
  43. ohh la la j'ai vraiment l'impression que tout le monde y arrive sans probleme et/ou arrive a resoudre ses problemes avec facilité...
    de mo coté j'ai l'impression d'etre la dernière des nouilles...
    j'ai modifié le codes et ça n'a pas marché... et ipossible de revenir en arrière... je m'en sors pas...
    TT.TT

    RépondreSupprimer
    Réponses
    1. As-tu fait une sauvegarde avant de faire les modifications ?
      Quel est le problème ?

      Supprimer
    2. je n'arrive pas à faire le menu deroulant (sous categories)
      TT.T

      Supprimer
    3. finalement, j'ai tout repris comme une grande
      et aujourd'hui nickel, tout fonctionne !!
      merci pour ce tuto !!
      ( ˘⌣˘)♡(˘⌣˘ )

      Supprimer
  44. Bonjour,
    Je reviens vers toi pour un autre blog.
    Le menu déroulant est en place mais je n'ai pas réussi à trouver:
    .tabs .widget li, .tabs .widget li {
    Ce qui fais que ma barre n'est pas centrée. J'avais eu le même soucis sur mon premier blog, mais je ne me rappel pas comment j'avais fais.
    Merci et bonne continuation
    Sam

    RépondreSupprimer
    Réponses
    1. Bonjour Sam, tu peux rajouter le code si tu ne le trouves pas.
      Rajoutes-le avant la ligne :

      /* Content

      Par exemple :)

      Supprimer
    2. Bonjour,
      J'ai fini par réussir. Ce n'est pas moi qui est commencé le blog, je ne sais pas si il y avait un problème ou pas. Je n'ai pas réussi à le faire avec l'apparence simple de blogger. J'ai donc fais bêtement un copier coller de mon propre blog en changeant par la suite les réglages.
      Une dernière demande, même si ce n'est pas le sujet. Je n'arrive pas à mettre le bouton Pinterest comme toi sur mon blog.
      Merci est bonne soirée

      Supprimer
    3. Bonjour Sam,
      As-tu bien remplacé :

      async defer

      du code pour le bouton Pinterest par :

      async="true" defer="true"

      Supprimer
    4. Bonjour
      Merci c'est bon, il faut juste être un peu patient :)
      Plus qu'une chose à résoudre, je ne trouve plus command faire. Mais je vais finir par retrouver.
      http://lestrucsdesam.blogspot.fr/

      Supprimer
    5. Une petite question
      Mes pages mettent plus longtemps à charger, surtout aujourd'hui et je suis obligé de rafraîchir la page pour avoir Pinterest qui apparaît. Normal?

      Supprimer
    6. De mon ordinateur j'ai eu le même problème, mais ça à été résolu en remplaçant :

      async defer

      du code pour le bouton Pinterest par :

      async="true" defer="true"

      Supprimer
    7. Bonjour,
      Merci, une copie du code:

      <script async="true" defer="true" data-pin-hover='true' data-pin-shape='round' src='//assets.pinterest.com/js/pinit.js' type='text/javascript...
      marche pas mieu :( , toujours obligé d'actualiser!

      Supprimer
  45. Coucou, j'ai un gros problème : mon menu s'affiche sur le côté de mon blog :( Je te laisse aller voir par toi-même, mon blog : http://thenailartzone.blogspot.fr/
    Malgré le fait que j'ai toujours des problèmes, tes tutos restent superbes :)

    RépondreSupprimer
    Réponses
    1. Je ne trouve pas le code CSS de ton menu et menu déroulant sur ton blog, l'as-tu bien ajouté ? Car c'est lui qui va définir l'apparence et la mise en page de ton menu et menu déroulant.

      Supprimer
  46. Hello,
    Merci beaucoup pour ton article il est vraiment super. Cependant j'ai un petit problème. J'ai suivie tes tutos précédant pour avoir le menu et jusque là tout allée bien mon menu été centré c'été nickel. Mais en faisant le menu déroulant une partie de mon menu c'est retrouvé à la ligne sur le coté de ma page. J'ai regardé pour voir si je n'avais pas fait une bêtise mais je n'ai rien trouvé. Donc 1er problème que je n'arrive pas à résoudre.

    Ensuite, les menus déroulant ne s'affiche pas sous mon menu mais complétement à gauche de ma feuille (pour la partie de mon menu restée au centre) et pour l'autre partie par contre c'est ok mais les la police est noir et non blanche comme les autres.

    Pour que tu comprenne mieux les problèmes voilà le lien de mon blog :
    http://www.floweredheart.com/

    Je te remercie par avance pour ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour Floriane,
      Il y a un problème dans le code HTML de ton menu, les 2 derniers liens ne sont plus dans la liste de liens.

      Remplaces tout ton code HTML par ce code :

      <div id="barre_nav">
      <ul>
      <li><a title="Beauté" href="http://www.floweredheart.com/search/label/Beaut%C3%A9">Beauté</a>
      <ul>
      <li><a href="http://www.floweredheart.com/search/label/Maquillage">Maquillage</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Peau">Peau</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Cheveux">Cheveux</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Nails">Nails</a></li>
      </ul>
      </li>
      <li><a title="Mode" href="http://www.floweredheart.com/search/label/Mode">Mode</a></li>
      <li><a title="Voyages" href="http://www.floweredheart.com/search/label/Voyages">Voyages</a>
      <ul>
      <li><a href="http://www.floweredheart.com/search/label/France">France</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Irlande">Irlande</a></li>
      <li><a href="http://www.floweredheart.com/search/label/%C3%89tats-Unis">Etats Unis</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Espagne">Espagne</a></li>
      </ul>
      </li>
      <li><a title="Cuisine" href="http://www.floweredheart.com/search/label/Cuisine">Cuisine</a></li>
      <li><a title="Extras" href="http://www.floweredheart.com/search/label/Extras">Extras</a>
      <ul>
      <li><a href="http://www.floweredheart.com/search/label/Déco">Déco</a></li>
      <li><a href="http://www.floweredheart.com/search/label/Lifestyle">Lifestyle</a></li>
      </ul>
      </li>
      </ul>
      </div>

      Le problème vient d'un </ul> mal placé qui ferme ton menu avant les 2 derniers liens. Ça devrait marcher maintenant :)

      Supprimer
  47. Oh Super, c'est bon problème résolu!! Ce n'est pas faute d'avoir vérifié plusieurs fois dans le code HTML lol. Merci beaucoup :)

    RépondreSupprimer
  48. Merci beaucoup pour tous tes tuto, c'est la notice du blogging !! ^^
    Je me demandais juste, j'aimerais que mon menu déroulant soit dans un encadré (fond blanc, mais encadré gris) est-ce possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour Anne Lise,
      Oui c'est tout à fait possible, il faut ajouter au code qui commence par :

      .tabs .widget li ul {

      la ligne suivante avant le signe } du code CSS :

      border: 1px solid #dddddd;

      Remplaces 1px par l'épaisseur de la bordure en pixels.
      Remplaces #dddddd par le code de la couleur de la bordure
      solid représente une bordure solide, mais elle peut aussi être en pointillés (dotted) ou en tirets (dashed) :)

      Supprimer
  49. Bonjour,

    J'essaie en vain de faire un menu déroulant, j'avait trouver un tuto pour faire une barre menu en incluant des images et c'était parfait, et j'ai voulu faire un menu déroulant en suivant ton tuto, et maintenant non seulement je n'ai pas de menu déroulant, mais en plus les modifications que j'avais apporté à mon blog (titre des articles, dates) rien à voir avec ton tuto donc, mais quand même sans explications et en copiant un de tes codes, tout à changer et impossible de modifier, pareil pour ma barre menu, avant tout était espacé, et copier ton code à tout changer. j'aimerai comprendre! je voudrais retrouver mes titres d'article comme ils étaient, ainsi que la dispostion de ma barre.

    Merci !

    RépondreSupprimer
  50. Bonjour,

    J'avais réussi à faire une barre de navigation incluant des images et ça me plaisait tout ça, puis j'ai commencer à essayer ton tuto et tout mon blog à changer sans que je comprenne pourquoi.

    Mes titre d'articles sont différents et je ne sais pas pourquoi, alors que ça n'a rien à voir. Et quand je vais dans modifier mon blog les options que j'avais choisi sont toujours selectionner; c'est donc à cause du code htlm.
    Aussi ma barre à changer: l'espacement

    et en plus de tout ça j'ai pas de menu déroulant !!!

    j'aimerais bien comprendre.

    Merci

    RépondreSupprimer
  51. re bonjour, finalement j'ai réussit à re-régler le problème dont je t'ai parlé, maintenant mon deuxième proiblème c'est que je n'arrivr pas à afficher une troisiéme sous catégorie

    RépondreSupprimer
    Réponses
    1. Bonjour, il y a plusieurs erreurs dans le code HTML de ton menu. Tous les <a></a> sont en trop car ne servent à rien. Il y aussi des <center></center> qui ne devraient pas être là.
      En fait quand tu créé ta liste de liens pour ton menu tu peux remplacer le texte du lien par une image en insérant le code HTML pour une image :

      <img src="" />

      Par exemple, le lien suivant :

      <li><a title="Lien" href="http://adresseblog.com/search/label/libellé">Libellé</a></li>

      Devient :

      <li><a title="Lien" href="http://adresseblog.com/search/label/libellé"><img src="http://adresseweb.com/image.png" /></a></li>

      J'ai remplacé le texte Libellé par le code HTML de l'image. C'est tout ce qu'il faut pour remplacer les liens par des images.

      Pour le menu déroulant remplace son code actuel par celui-ci :

      <ul>
      <li><a href="http://zecrabbies.blogspot.co.uk/search/label/nanny">Nanny</a></li>
      <li><a href="http://zecrabbies.blogspot.co.uk/search/label/Sevdefrance">Sév</a></li>
      </ul>

      Ensuite, rajoutes :

      <li><a href="URL LIEN">sous-catégorie 3</a></li>

      Juste après le </li> de ta 2e sous-catégorie, comme ceci :

      <ul>
      <li><a href="http://zecrabbies.blogspot.co.uk/search/label/nanny">Nanny</a></li>
      <li><a href="http://zecrabbies.blogspot.co.uk/search/label/Sevdefrance">Sév</a></li>
      <li><a href="URL LIEN">sous-catégorie 3</a></li>
      </ul>

      Remplaces URL LIEN par le lien de la 3e sous-catégorie et "sous-catégorie 3" par le nom du lien.

      Supprimer
  52. bonjour, est-il possible de choisir un style de police comme coming soon par exemple. lorsque je tape ce style de police, le texte reste en arial. :(

    RépondreSupprimer
    Réponses
    1. Bonjour Kelly,
      Tu peux essayer d'installer la police sur ton blog avec Google Fonts. J'ai fait un tutoriel qui explique comment faire : http://ladybirdr.blogspot.com/2014/11/utiliser-des-polices-google-fonts.html

      Supprimer
  53. Bonjours, j'ai réussis à tout créer, seulement lorsque je clic que une sous catégorie, je n'accèdes pas aux articles que je souhaiterais. En fait, rien ne s'affiche du tout, comme puis-je faire pour "glisser" mes articles dans les sous catégorie?
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour, pour l'instant tu n'as pas ajouté de lien URL aux liens de ton menu, c'est donc normal que rien ne s'affiche.
      Pour associer des articles à un lien on va utiliser les libellés. J'ai pu voir que tu as déjà des libellés sur tes articles, de ce fait il te suffit de copier le lien de recherche d'un libellé (Nail Art par exemple) et de l'insérer dans le code HTML du lien de ton menu.
      Le lien de recherche de libellé est de la forme :

      http://adresseblog.blogspot.com/search/label/libellé

      Remplaces libellé par le nom de ton libellé. Attention à remplacer les espaces par %20, ce qui donne :

      http://douceurdefille.blogspot.fr/search/label/Nail%20Art

      Il faut ajouter cet URL à la place de http://adressedublog.fr/souscatégorie1 du code du lien de ta sous-catégorie :

      <li><a href="http://adressedublog.fr/souscatégorie1">Sous Catégorie 1</a></li>

      Devient

      <li><a href="http://douceurdefille.blogspot.fr/search/label/Nail%20Art">Nail Art</a></li>

      Il faut faire ça pour tous tes liens.

      Supprimer
    2. D'accord je vois, seulement c'est pas entièrement ton tutoriel que j'ai utilisé. Je suis une toute novice. Mon code ne donne pas ça :/ Donc tes liens je dois les inséré où? Sous les code de sous catégorie?

      Supprimer
    3. AH NAN C4EST BON MERCI!!!
      J'AI TROUVE EN BIDOUILLANT! -dansedelajoie-
      !!!

      Merci d'avoir répond si vite!

      Supprimer
    4. Effectivement, j'ai regardé ton menu et je ne trouve pas le code pour les menus déroulants dans le code HTML de ton menu.. Mais tu sembles avoir trouvé comment mettre les liens car ça marche maintenant ! ^^

      Supprimer
    5. Merci bien!
      J'aurais juste une autre question, dans mes onglets, une flèches rouges apparrait, saurais-tu comment la retirer?
      Merci d'avance!

      Supprimer
    6. Bonjour Tessa,
      Vas sur le gadget HTML de ton menu et retrouves le code HTML de ton menu :

      <div id="ddtopmenubar" class="mattblackmenu">

      <li>
      <a href="#" rel="ddsubmenu1" class="">BEAUTE<img src="http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu2" class="">LIFESTYLE<img src="http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu3">CULTURE<img src="http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu4">GEEKERIES<img src="http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu5">A PROPOS<img src="http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a>
      </li>

      </div>

      Remplaces-le par :

      <div id="ddtopmenubar" class="mattblackmenu">

      <li>
      <a href="#" rel="ddsubmenu1" class="">BEAUTE</a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu2" class="">LIFESTYLE</a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu3">CULTURE</a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu4">GEEKERIES</a>
      </li>
      <li>
      <a href="#" rel="ddsubmenu5">A PROPOS</a>
      </li>

      </div>

      Supprimer
    7. Rebonjour!
      J'ai suivis tes indications mais malheureusement, les flèches sont toujours présentes :/

      Supprimer
    8. En effet, dans ce cas ça vient du code que tu as utilisé pour créer ton menu. Il utilise du JavaScript en plus du HTML. Les flèches viennent peut-être de là, et tu ne pourras pas le modifier.
      Du coup la seule solution c'est de refaire ton menu à partir de HTML seulement, car tu pourras vraiment contrôler toute son apparence.
      Tu peux suivre mes tutos pour la création et le personnalisation du menu :
      http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html
      et :
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
    9. Le problème, c'est que j'ai pas réussi :3

      Supprimer
    10. Tu peux essayer de le refaire dans un nouveau gadget HTML. Si tu es bloquée envoi-moi un message et j'y jetterai un œil ;)

      Supprimer
  54. Bonjour Catherine,
    Je t'envoie ce message en dernier recours. J'ai créé mon menu déroulant en suivant pas à pas tes indications, mais un problème subsiste. Tous les éléments censés dérouler sont constamment présents : bon, écriture blanche sur fond blanc, en soi ce n'est pas un souci. Le truc, c'est que ces fichues écritures empiètent sur l'encart "profil" de la colonne de droite. Sais-tu d'où le problème pourrait venir ? J'ai essayé de trouver la faille, mais sans y parvenir. --
    Bonne journée !

    Ophélie. xx

    RépondreSupprimer
    Réponses
    1. Bonjour Ophélie,
      Peux-tu me donner le lien vers ton blog pour que je puisse regarder d'où vient le problème ?

      Supprimer
    2. Re-bonjour,
      Finalement, j'ai réussi à trouver le problème (une ligne à la con dupliquée) ! Merci beaucoup d'avoir pris le temps de me répondre, et pour tous ces précieux conseils que tu offres ! ♥

      Supprimer
  55. Bonjour, tout d'abord ton blog est génial, je l'aime beaucoup tu donne de très bons conseils !
    Je voulais savoir, j'ai mon menu, sauf que celui ci n'a pas été fait avec du code html mais avec le widget "pages" est-ce quand même possible de créer un menu déroulant ?
    http://miss--fashionista.blogspot.fr/
    Bonne après-midi !

    RépondreSupprimer
    Réponses
    1. Bonjour, malheureusement ce n'est pas possible avec le gadget pages.
      Pour ajouter un menu déroulant il faut avoir accès au code HTML du gadget et le modifier, or ce n'est pas possibles avec le gadget Pages. Désolée :/

      Supprimer
    2. D'accord, se n'est pas grave le soucis c'est que j'avais déjà essayé de faire le menu avec le code html mais ça n'a pas marché j'ai utilisé les deux étapes avec la création et la personnalisation du menu, mais il est resté en liste.
      Et j'ai un autre petit soucis, tout à l'heure j'ai voulu réessayez mais dans mise en page, le gadget reste bloqué sous le "ajouter un gadget" se qui fait que je peux ni le modifier ni le supprimer.
      J'espère que tu me comprend et que tu pourra m'aider ^^

      Supprimer
    3. Essaye de supprimer le code CSS qui fixe ton menu en haut du blog :

      /* Fixer la barre de navigation en haut du blog */
      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Sauvegardes et réessaye.

      Supprimer
    4. D'accord merci.
      Mais j'ai un autre soucis qui m'handicape énormément et qui commence à m'énerver, est-ce que tu serai pourquoi tous mes gadgets sont bloqués dans la partie mise en page car je ne peux plus modifier des gadgets ni les déplacés.

      Supprimer
    5. Essaye d'aller sur Modèle puis Modifier le code HTML. En haut de la boîte de code tu trouveras un bouton Accéder au widget. Sélectionnes les différents gadgets (HTML, Popular posts, etc.), tu seras renvoyé vers le code de tes gadgets.
      Ces codes ressemblent à :

      <b:widget id='HTML2' locked='false' title='' type='HTML'>

      Les mots HTML vont varier selon le gadget. Vérifies que tu as bien :

      locked="false"

      dans le code, et non :

      locked="true"

      Si c'est bien le cas, alors je ne sais pas de quoi ça peut venir :/

      Supprimer
  56. Merci beaucoup pour tes réponses, j'ai été sur un forum blogger et quelqu'un m'a aidé.
    Mais merci beaucoup quand même !

    RépondreSupprimer
    Réponses
    1. Pas de soucis, du coup comment as-tu réglé le problème ?

      Supprimer
  57. Désolé de te ré embêté j'ai refais mon menu en html tout a fonctionner mais quand j'ai voulu faire le menu déroulant il me met tout en vrac, ça me donne ça: http://miss--fashionista.blogspot.fr/

    RépondreSupprimer
  58. En fait c'est bon j'ai réussi j'avais fais une mauvaise manip' ^^

    RépondreSupprimer
  59. Coucou Catherine :)

    Tout d'abord merci pour tes tutos super bien expliqués! Ton blog est une vrai caverne d'Ali Baba!

    J'ai suivi à la lettre ton tutoriel, mais j'ai toujours un petit problème et je ne vois pas où le modifier. J'ai voulu faire un seul menu déroulant pour la catégorie "Catégories", or quand j'enregistre le titre n'est pas du tout aligné avec les autres et est beaucoup plus haut (de l'espace du menu déroulant). Je te laisse le lien du blog, ça sera sûrement plus parlant: http://grainesdeblogueuses.blogspot.fr/

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour, étrangement le code CSS de ton menu déroulant n'est pas pris en compte. Essaye de déplacer tout le code à la suite du code CSS de ton menu. Coupes tout le code le code suivant :

      /* Apparence du menu déroulant */
      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index:9999;
      }
      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
      }
      .tabs .widget li li {
      display: block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 150px; /* Largeur de la barre des sous-catégories */
      }
      .tabs .widget li:hover li a {
      background-color: #E6AFAE; /* Couleur du fond du lien */
      }
      .tabs .widget li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }
      .tabs .widget ul ul a {
      color: #ffffff; /* Couleur des liens */
      }
      .tabs .widget li ul a:hover, .tabs .widget li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #F3D7D6; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Et colles-le juste avant la ligne suivante :

      /* Columns

      Supprimer
    2. Merci pour ta précieuse aide! Maintenant tout est bien! :)

      Supprimer
  60. hellO,
    Je découvre ce matin ton blog! il est juste Top!!!
    Bon par contre, j'ai passé tte la matinée à essayer d'incorporer ce menu déroulant, mais je crois que je suis vraiment très nulle !!!
    Le résultat est juste beurk!!!!
    A chaque x que je copie & colle les codes dans search il ne les trouve jamais!
    ... :-(
    http://silceoflifeonpaper.blogspot.co.uk/
    Bonne après-midi, Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,

      As-tu bien cliqué dans la boîte où il y a le code de ton thème avant d'appuyer sur Ctrl et F ? Car si tu ne le fais pas, une autre boîte de recherche s'ouvrira mais en haut de la page web et elle ne marche pas.

      Vérifies également qu'il n'y a pas d'espace avant ou après le code que tu colles dans la boîte de recherche, sinon ça ne marchera pas non plus ;)

      Supprimer
  61. Bonsoir,
    Ce matin j'ai découvert votre blog émerveillée devant toutes les possibilités qui s'offrent à nous pour obtenir THE BLOG !!!
    J'ai voulu m'attaquer au menu déroulant ... & bien j'ai abandonné car ça commencé à me taper sur le système sérieusement!!!
    En fait tout va bien sauf au moment ou je dois copier -> coller dans {search} -> .tabs .widget li, .tabs .widget li {
    Rien ne se passe, il ne trouve jamais ce que je lui demande de chercher!!
    Maintenant la barre ne ressemble plus à rien! =(
    Peut-être que vous pourriez m'aiguiller à l'occasion?!?
    D'avance Merci!
    Bonne nuit
    ...gWen...

    RépondreSupprimer
    Réponses
    1. Bonjour Gwen,
      Si tu ne trouves pas ce code, ajoutes-le simplement à la suite des codes CSS de ton menu ;)

      Supprimer
    2. Bonsoir,
      Merci pour l'info je vais tester...je vous tiens qu courant!
      ;o)
      ...gWen...

      Supprimer
    3. Bonsoir Catherine,
      C'est ok pour moi, I did it !!!
      { = danse de la joie !!!}
      Merci encore
      Bonne nuit!
      ...gWen...

      Supprimer
  62. Bonjour !

    Tout d'abord, MERCI. Tes tutos sont vraiment d'une grande aide quand on démarre son blog ! ^^

    Cependant, je rencontre également quelques problèmes. Tout d'abord, la police choisie pour ma barre de menu ne s'affiche absolument pas (grr) Quand au menu déroulant, pareil. Quand je passe ma souris dessus et que je descends sur les catégories, hop ça disparait. Comment puis-je faire ? Je te remercie d'avance :)

    Elodie

    Littlelodie.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      As-tu bien installé la police Dancing Script sur ton blog ? Car je ne vois pas le code Google Fonts qui correspond à cette police sur ton blog :/
      Pour le menu déroulant qui disparaît, retrouves ton code suivant :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 145px;
      padding-top: -100px;
      z-index: 9999;
      }

      Et remplaces-le par :

      .tabs .widget li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 145px;
      z-index: 9999;
      margin-top: 0 !important;
      margin-top: 0 !important;
      border-top: dotted;
      border-top-color: #E36DAC;
      border-top-width: 1px;
      }

      Ça devrait régler le problème ;)

      Supprimer
  63. Bonjour, j'ai un petit souci... Je souhaiterai faire plusieurs menus déroulants. Or, pour le moment, la première partie des menus déroulants s'affiche normalement. Mais quand on est sur la partie "Voyages" par exemple, toutes les catégories sont les unes en dessous des autres. J'imagine que c'est un souci de CSS mais je n'ai aucune idée de par où commencer !

    http://testdancinginnowhere.blogspot.fr/

    Merci par avance pour ton aide ! Je suis en train d'essayer de refaire tout mon blog et j'avoue que je galère un peu. :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Effectivement il faut ajouter des codes CSS pour gérer l'affichage des menus déroulants secondaires.
      Ajoutes les codes suivants à la suite des codes CSS de ton menu :

      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      .tabs ul ul ul {
      position: absolute;
      left: 165px;
      margin-top: -40px !important;
      top: auto;
      }

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      Ensuite il y a une petite erreur dans le code HTML de ton menu déroulant sous Voyage. Tu as 2 liens Afrique et Europe mais ils sont chacun dans un menu déroulant distinct au lieu d'être dans un seul menu déroulant.

      Repère ta ligne suivante :

      <a href="http://www.dancinginnowhere.com/search/label/europe">Europe</a>

      Juste au-dessus se trouvent les codes suivants :

      </ul>
      <ul>
      <li>

      Supprimes les deux codes suivants :

      </ul>
      <ul>

      Et voilà ;)

      Supprimer
  64. Bonjour,
    je voulais créer pour les six thèmes de mon menu deux sous catégories (en menu déroulant), j'ai suivi quelques étapes du tuto et je me retrouve avec les sous catégories visibles. Comment faire pour qu'elles n'apparaissent que lorsque l'on passe la souris?
    par avance merci

    http://leleespagnol.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jean-marc,
      Il faut ajouter le code CSS donné dans le tutoriel pour définir l'apparence du menu déroulant ;)

      Supprimer
  65. Bonjour,

    Ton blog est une mine d'or, et très beau. Alors j'ai suivi les tutos pour le menu navigation.
    Je travaille sur un blog test, j'ai une erreur pour les sous catégories. j'ai lu que tu avais donné une solution dans les commentaires mais en mettant cette solution, cela ne change rien.
    Pourrais tu m'aider? Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu m'expliquer ton problème ?

      Supprimer
  66. J'ai un gros souci avec mon menu, je l'ai créé en suivant tes indications.

    Seulement quand je l'affiche, rien n'est en sous catégorie :/ (il donne un nuage de catégorie) Et quand je passe à la personnalisation, je ne trouve aucun des codes que tu as marqué :/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne peux pas voir d'où vient le problème car tu as utilisé un autre code pour ton menu :/

      Supprimer
    2. J'ai ré-utiliser le tien entièrement, mais ça fais un nuage au lieu de faire les colonnes avec les sous catégories :/

      Supprimer
    3. Bonjour,
      Je viens de regarder ton blog et il me semble que tu as pu régler le problème ? ;)

      Supprimer
  67. Salut Catherine !
    J'ai un énième problème de menu. J'ai réussi à fixer ma barre de navigation en haut, de manière à ce qu'elle ne bouge pas, même en scrollant. Sauf que mon menu déroulant ne se déroule que en haut à gauche, de manière fixe. Tu as une idée d'où ça pourrait venir ?
    xx

    RépondreSupprimer
    Réponses
    1. Comme tu as déplacé ton menu au-dessus de ton en-tête, il faut utiliser le code CSS suivant :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Au lieu de :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Supprimer
  68. Bonjour Catherine,
    Tout d'abord merci infiniment pour tout ces tutoriels de personnalisation !
    Tout s'est très bien déroulant pour réaliser mon menu déroulant, mais j'ai un petit soucis :
    mes sous catégories s'affichent en haut à gauche du blog, je ne peux donc pas cliquer dessus..
    Aurais-tu une solution s'il te plaît ?
    Je te laisse l'adresse du blog afin que tu puisses voir par toi-même : http://pinklyxpunk.blogspot.fr/
    Belle fin de journée.

    RépondreSupprimer
  69. Au temps pour moi, en fouillant dans les commentaires j'ai pu résoudre le problème. Désolée du dérangement, et encore merci pour tout ces tutoriels !

    RépondreSupprimer
  70. Un énorme merci pour tes tutos qui sont supers clairs et très bien faits ! Pour le moment pas de soucis :) Je croise les doigts pour continuer ! Merci encore !

    RépondreSupprimer
  71. Bonjour !
    J'essaie d'introduire un sous-menu déroulant dans une catégorie et je n'y arrive pas :(
    Pouvez-vous me dire ce que j'ai mal écrit s'il vous plaît ?
    Et merci pour tous vos tutos !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Essayes-tu d'ajouter un menu déroulant à une catégorie qui est dans un menu déroulant ?
      Si oui, alors il faut ajouter des codes CSS pour gérer l'affichage des menus déroulants secondaires.
      Ajoutes les codes suivants à la suite des codes CSS de ton menu :

      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

      .tabs ul ul ul {
      position: absolute;
      left: 165px;
      margin-top: -40px !important;
      top: auto;
      }

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      Supprimer
    2. Merci beaucoup de me répondre si vite !
      J'ai collé le code ci-dessus mais malheureusement ça ne marche toujours pas.
      Je l'ai placé à la suite de ça :

      /* Menus déroulants
      ----------------------------------------------- */
      #barre_nav li ul {
      display: none;
      height: auto;
      padding: 0px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 150px; /* Largeur de la barre des sous-catégories */
      padding-top: 10px; /* Distance entre barre des sous-catégories et barre de navigation */
      z-index: 9999;
      }

      #barre_nav li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
      }

      #barre_nav li li {
      display: block;
      float: none;
      margin: 0px;
      padding: 0px;
      width: 150px; /* Largeur de la barre des sous-catégories */
      }

      #barre_nav li:hover li a {
      background-color: #ffffff; /* Couleur du fond du lien */
      }

      #barre_nav li ul a {
      display: block;
      height: auto;
      margin: 0px;
      padding-top: 5px; /* Distance au dessus des liens */
      padding-bottom: 5px; /* Distance en dessous des liens */
      padding-left: 10px; /* Distance à gauche des liens */
      text-align: left;
      }

      #barre_nav ul ul a {
      color: #525252; /* Couleur des liens */
      }

      #barre_nav li ul a:hover, #barre_nav li ul li:hover > a {
      color: #000000; /* Couleur des liens quand survolés par la souris */
      background-color: #ffffff; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Supprimer

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger