28182 sujets

CSS et mise en forme, CSS3

Menu déroulant centré

Bonjour,

J'ai crée un menu déroulant avec 3 liens principaux. Lorsque j'utilise la propriété float pour déplacer mon menu vers le côté droit ou gauche de ma page, tout fonctionne, rien à signaler. Mais lorsque je positionne mon menu au centre de ma page avec text-align: center; , quelque chose d'étrange se passe.
J'ai crée un sous-menu pour mon lien 2. Mais lorsque je centre mon menu, 2 des 3 liens du sous-menu + le lien 2 surplombent les liens 1 et 3 de mon menu. Le dernier lien de mon sous-menu se met à la même hauteur que mon lien 1 et 3.

Je ne sais pas si je me suis bien fait comprendre.

Svp venez moi en aide !

Merci d'avance
Bonjour,

Je pense que, si j'ai bien compris, c'est un problème de sélecteur qui prend le dessus sur les autres...
Mais si vous pouviez nous montrer votre code, ce serait plus facile pour débuger Smiley smile
Je débute, soyez indulgents ! Smiley rolleyes
Voici mon code ! 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> </title>
        <link rel='stylesheet' type='text/css' href='accceuil.css' media='all' />
    </head>
    <body>
    <header>  
        <h1> Titre site </h1>
    </header>
        <div class="menu">
            <ul>
                <li><a href=" ">Lien 1 </a> </li>
                <li><a href=" ">Lien 2</a> 
                    <ul> 
                        <li><a href="">Lien 1</a></li>
                        <li><a href="">Lien 2</a></li>
                        <li><a href=""> Lien 3</a></li>
                    </ul>
                </li>
                <li><a href="">Lien 3</a></li>
            </ul>
        </div>
    </body>
</html>



h1{
    font-family: 'Cambria';
    font-size: 50px;
    margin, padding: 0 auto;  
    color: #c68b7e; 
    text-align: center; 
}


.menu ul{
    list-style: none;
    margin: none; 
    padding: 0px;
    font-family: 'Georgia'; 
    font-size: 16px; 
    text-align:center; 

}

a {
    text-decoration: none;
    color: red;
}

.menu ul li{
    width: 200px; 
    height: 35px; 
    margin: 0px;
    padding: 0px; 
    line-height: 40px; 
    text-decoration:none; 
    color: #fff; 
    padding-bottom: 5px;
    border: 1px solid #fff;  
    display: inline-block; 
}

.menu ul li a:hover{
    display:block; 
    color: aqua;
}

.menu ul li ul li {
    display: none; 
}

.menu ul li:hover ul li{ 
    display:block; 
}

Modifié par Nauwlie (06 May 2020 - 18:04)
Bonjour,

Voici la correction de votre css et de votre html.
C'est le display: inline-block qui posait problème. son positionnement sera par défaut en baseline et donc les liens se mettaient en bas. 
.menu ul {
    list-style: none;
    margin: 0; 
    padding: 0;
    font-family: 'Georgia'; 
    font-size: 16px; 
    text-align:center; 

}

a {
    text-decoration: none;
    color: red;
}

.menu .main-menu > li {
    width: 200px; 
    height: 35px; 
    margin: 0;
    padding: 0; 
    line-height: 40px; 
    text-decoration:none; 
    color: #fff; 
    padding-bottom: 5px;
    border: 1px solid #fff;  
    display: inline-block; 
	vertical-align: middle;
}

.menu ul li a:hover{
    display:block; 
    color: aqua;
}

.menu .sub-menu {
    display: none; 
}

.menu .main-menu li:hover .sub-menu { 
    display: block; 
}


Et l'html 


<nav class="menu">
            <ul class="main-menu">
                <li><a href=" ">Lien 1 </a> </li>
                <li><a href=" ">Lien 2</a> 
                    <ul class="sub-menu"> 
                        <li><a href="">Lien 1</a></li>
                        <li><a href="">Lien 2</a></li>
                        <li><a href=""> Lien 3</a></li>
                    </ul>
                </li>
                <li><a href="">Lien 3</a></li>
            </ul>
        </nav>


j'ai rajouté des class, c'est plus facile pour la manipulation et il est conseillé de le faire.
Modifié par Gus (07 May 2020 - 09:23)
Meilleure solution
Sujet clos
Aller à