WordPress : Menu déroulant montrant l’écart entre le menu et le sous-menu ?

Je personnalise le thème WordPress Twentyeleven. Voici le lien pour la référence. Ici, vous pouvez voir que lorsque vous passez la souris sur le menu, la liste déroulante s’affiche. Mais vous pouvez voir qu’il y a un écart entre le menu parent (entreprise) et le sous-menu. Alors, comment effacer cela? Toute aide et suggestion sera très appréciée.

Solution n°1 trouvée

Changez quelques CSS :

#access li:hover > a,
#access a:focus {
  background: #FFF; /* Show a solid color for older browsers */
  color: #373737;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  margin-bottom: -4px;
  padding-bottom: 9px;
}

La marge inférieure doit être ajoutée.

Les autres réponses modifient la mise en page d’origine.

Mise à jour : padding-bottom ajouté. c’est 9px alors que nous montons 4, nous devons descendre 8 plus 1 pour le rembourrage#access a

Solution n°2 trouvée

C’est parce que vous avez une marge de 4 pixels sur la liste déroulante.

Vous devez changer margin: 4px;sur #access a {, qui définit la marge tout autour de la <a>balise, y compris en dessous. Changez-le en ce margin: 4px 4px 0 4px;qui met la marge de tous les côtés sauf le bas

Démo mise à jour ici

Solution n°3 trouvée

Modifiez simplement la déclaration CSS suivante :

#access ul ul {
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  display: none;
  float: left;
  margin: 0;
  position: absolute;
  top: 33px;
  left: 4px;
  width: 193px;
  z-index: 99999;
  padding: 14px 0 5px 0;
  -webkit-border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  border-radius: 0 0 2px 2px;
}

À:

#access ul ul {
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  display: none;
  float: left;
  margin: 0;
  position: absolute;
  top: 41px;
  left: 4px;
  width: 193px;
  z-index: 99999;
  padding: 0 0 5px 0;
  -webkit-border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  border-radius: 0 0 2px 2px;
  background-color: #FFF;
}

Notez la modification des propriétés paddinget topet l’ajout de background-color.