CSS Aligner le sous-menu Résolu/Fermé

Question

Bonjour J'aurai besoin d'aide svp pour mon menu. Je ne réussis pas à aligner mes sous-menus dans mon menu. CSS : nav { margin:0 auto; text-align: center; width:50%; background: linear-gradient(gray, white); border-radius:10px;}nav li { list-style-type:none; display:inline-block; padding:10px; width:150px; height:100%;}nav ul ul { display:none; position:absolute;}nav li:hover{ background-color:#C2C2C2;}nav li:hover>ul{ display:block;}nav ul ul li{ background-color: white; display:block; width:150px;}nav a { text-decoration:none; color:black;} HTML :

Kopros · Answer

Quelques détails importants :
- Un élément en position absolute doit être encapsulé dans un élément positionné (relative ou absolute) sinon il va se placer selon un autre élément qu'on ne veut pas

- En position absolute, vaut mieux définir top et left (ou bottom et right) car sinon c'est le navigateur qui décide où le placer, et tous les navigateurs ne font pas la même chose.

- Vaut mieux définir un padding et un margin à 0 pour tous les éléments, car certains navigateurs s'amusent à en mettre là où en veut pas, notamment sur la balises ul, et là encore ça fait pas pareil partout

- Les liens dans un menu doivent avoir les mêmes dimensions que leur conteneur, sinon l'utilisateur est obligé de cliquer pile poil dessus et c'est chiant.

- Certaines fois, vaut mieux pas mettre de width ni de height, sinon la mise en page peut être décalée selon les navigateurs et les résolutions des clients. Surtout avec height à 100%, c'est le navigateur qui décide c'est en fonction de quel élément qu'il doit calculer les 100%.

- Le mot Accueil ne s'écrit pas comme tu l'as mis.

Voilà le CSS comme je le ferais :

*{padding: 0;margin: 0;}
nav {
    margin:0 auto;
    text-align: center;
    width:50%;
    background: linear-gradient(gray, white);
    border-radius:10px;
}

nav li 
{
 list-style-type:none;
 display:inline-block;
 /*padding:10px;*/
        margin: 0 5px;
        position: relative;
 /*width:150px;
 height:100%;*/
}

nav ul ul 
{
 display:none;
 position:absolute;
        top: 35px;
        left: 0;
}

nav li:hover
{
 background-color:#C2C2C2;
}

nav li:hover>ul
{
 display:block;
}

nav ul ul li
{
 background-color: white;
 display:block;
        padding: 0;
        margin: 0;
 width:150px;
}

nav a 
{
 text-decoration:none;
 color:black;
        display: inline-block;
        width: 100%;
        padding: 10px 0;
}



EDIT

Pour améliorer la compatibilité entre les navigateurs, pour les border radius je passe toujours par ce site : https://border-radius.com/

et pour générer les dégradés de couleurs, je passe par l'excellent outil de chez mozilla : https://www.colorzilla.com/gradient-editor/

CSS Aligner le sous-menu

1 réponse

Discussions similaires