Bonjour/bonsoir à tous.

J'ai un problème avec mon menu déroulant, comme beaucoup de personnes visiblement.

Voici mon code : http://codepen.io/UncleSinge/pen/RrNEYz

J'ai deux problèmes, le premier est ce petit espacement après les cellules lorsque l'on place le curseur dessus, j'aimerais qu'il disparaisse. Le second, c'est le menu qui passe par-dessus la barre de scroll à droite, je pense que c'est mon width 100% qui en est la cause mais je voudrais que le background prenne toute la largeur de l'écran même lorsque l'on dézoome la page tout en gardant le menu centré, en plus d'être fixe pour un accès permanent quand on descend dans la page. (comme sur jv.com en fait)

Je commence à m'embrouiller avec mes margin, padding, etc... J'ai sûrement du coder ça comme un manche étant donné que je débute.

Merci d'avance.

Pour l'espace entre tes li c'est lié au fait que les éléments en inline-block sont chacun espacés de 4px par défaut (oui c'est fourbe comme spécification )

Un coup de margin-left:-4px; et ça sera bon

Ton autre question j'ai absolument pas compris de quoi tu parlais par contre

Merci de ta réponse, je vais aller corriger ça de suite.

Et pour mon deuxième problème, c'était pas facile d'expliquer donc je mets des screens.

Le truc qui déconne c'est ça :

Le menu passe carrément devant la barre de scroll à droite.

Et je veux que ce menu soit fixé à l'écran car mes pages sont assez longues. (position: fixed; comme je l'ai fait, mais je me demande si c'est la meilleure solution ?)

Ensuite, je veux garder le background du menu sur toute la longueur même avec un dézoome:

Mais j'ai toujours ce problème de superposition à cause du width 100% probablement, mais du coup je ne vois pas comment garder la longueur du background.

C'est peut-être inutile mais ça m'évitera de devoir modifier des choses plus tard, surtout que je vais devoir me lancer dans les media queries.

Le 08 décembre 2015 à 23:46:41 amiral-crevard a écrit :
Pour l'espace entre tes li c'est lié au fait que les éléments en inline-block sont chacun espacés de 4px par défaut (oui c'est fourbe comme spécification )

Un coup de margin-left:-4px; et ça sera bon

Ton autre question j'ai absolument pas compris de quoi tu parlais par contre

C'est pas vraiment 4px qui est spécifié mais c'est la taille d'un espace en fonction de la taille de police de la page.
Pourquoi ? Car les éléments inline se comportent comme du texte (tu peux les centrer avec text-align) et donc il considère le retour à la ligne et l'indentation comme étant un espace entre deux mots.

La solution, c'est de rajouter font-size: 0; dans le <ul> et de remettre un font-size correcte dans tes <li>

Pour le background, faudrait utiliser "background-size: cover;" mais ça va pas être joli à voir.

Merci pour la solution du font-size, ça fonctionne encore mieux.

Par contre pour le background, je parle bien de la bande grise transparente et pas du background de la page. Donc le background-size: cover; ne semble pas fonctionner.