CSS Aligner le sous-menu

Résolu/Fermé
Signaler
Messages postés
115
Date d'inscription
samedi 7 juillet 2007
Statut
Membre
Dernière intervention
23 mars 2017
-
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
-
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 :


<nav>
<ul>
<li><a href="compte.php">Accuiel</a></li>
<li><a href="">Conversation de goupe</a></li>
<li><a>Ami</a><br>
<ul>
<li><a href="#">Ajouter</a></li>
<li><a href="#">Rechercher</a></li>
</ul></li>
<li><a>Changer le mot de passe</a></li>
<li><span><?php echo $utilisateur; ?></span> <a href="deconnexion.php">Déconnexion</a></li>
</ul>
</nav>

1 réponse

Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
85
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/
0