18041 sujets

Questions générales et questions de débutants

[Résolu] Problème avec menu vertical

Bonjour à tous,

J'ai un petit problème avec mon menu déroulant vertical.

Quand je survole niveau 1 le sous niveau 1 apparait, jusque-là c'est bon et quand je survole le sous niveau 1 et que j'arrive à la hauteur de niveau 2 c'est le sous niveau 2 qui apparait,

Voici le code de ma page html,

Merci de m'apporter votre aide.


    <!DOCTYPE html>
          <html lang="fr">
               <head>
                    <meta charset="utf-8" />

                    <link href="../css/index.css" rel="stylesheet" type="text/css"/>
                    <link rel="icon" type="image/png" href="favicon.png" />

                    <meta name="robots" content="noindex">
               
                <title>Le footer ou le pied de page</title>
                <meta name="description" content="" />

                <style type="text/css">
               
    /* Le menu */
    #menu{
    width: 80%;
    float:right;
    }

    .navigation, .navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0;
    }               

    .navigation li {
        position: relative;
        font-size: 16px;
    }

    .navigation a {
        display: block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #50020a;
    }

    .navigation ul {
        display: none;
        left: -999em;
        position: absolute
    }

    .navigation li:hover > ul {
        display: block;
        left: 150px;
        top: 0
    }

    .navigation li li:hover > ul {
        left: 150px;
        top: 0
    }

    .navigation a:hover {
        color: #50020a;
        background: #ccc
    }

    a {
    text-decoration: none;
    color: #63c6ff;
    }

    /* ---------------------------------- */
               
                </style>
            </head>
        <body>
       
        <div id="menu">

    <ul class="navigation">
        <li><a href="#">Acceuil</a></li>
        <li><a href="#">Niveau 1</a>
            <ul>
                <li><a href="#">Sous Niveau 1.1</a></li>
                <li><a href="#">Sous Niveau 1.2</a></li>
                <li><a href="#">Sous Niveau 1.3</a></li>
                <li><a href="#">Sous Niveau 1.4</a></li>
                <li><a href="#">Sous Niveau 1.5</a></li>
            </ul>
        </li>

        <li><a href="#">Niveau 2</a>
            <ul>
                <li><a href="#">Sous Niveau 2.1</a></li>
                <li><a href="#">Sous Niveau 2.2</a>
                    <ul>
                        <li><a href="#">Sous-menu 2.2.1</a></li>
                        <li><a href="#">Sous-menu 2.2.2</a></li>
                        <li><a href="#">Sous-menu 2.2.3</a></li>
                        <li><a href="#">Sous-menu 2.2.4</a></li>
                        <li><a href="#">Sous-menu 2.2.5</a></li>
                    </ul>
                </li>   
            </ul>
        </li>
       
        <li><a href="#">Niveau 3</a>
            <ul>
                <li><a href="#">Sous Niveau 3.1</a></li>
                <li><a href="#">Sous Niveau 3.2</a></li>
                <li><a href="#">Sous Niveau 3.3</a></li>
            </ul>
        </li>
    </ul>
    </div>


          </body>
    </html>
Modérateur
Bonjour,

C'est ton menu qui est trop large et mal positionné :
   #menu{
    width: 80%;
    float:right;
}

Un float right sur un menu qui a un sous menu à droite c'est un peu torturé et ca a du t'amener à faire un width 80% pour le re-décaler vers la gauche -> fatale erreur, les <li> sont aussi grand que leur conteneur.
   #menu{
    float:left;
}

Ou encore
   #menu{
    display:inline-block;
}

Bon weekend
Modifié par _laurent (13 Dec 2014 - 14:10)
Ok merci c'etait bien cela, encore une fois merci beaucoup à toi.

j'ai utilisé :

#menu{
display:inline-block;
}
Modifié par brunoh88 (13 Dec 2014 - 17:19)
J'aurais si c'est possible une question subsidiaire. Smiley lol Smiley confused

Comment faire dérouler le menu sur la gauche si celui-ci se trouve à droite??? Smiley cligne

Merci. Smiley smile
Modérateur
Ah j'avais pas vu ! Heureusement que je repasse ici par hasard parcequ'on a pas de notif !

Pour le dérouler c'est simple. Si tu analyse un peu ton css tu as donné une largeur de 150px à tes éléments :
    .navigation a {
        display: block;
        width: 150px; // <- ici
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #50020a;
    }

Et pour déplier ton sous menu c'est (entre autre) ce code là :
    .navigation li:hover > ul {
        display: block;
        left: 150px;
        top: 0
    }

Ce qu'il fait c'est au survol de l’élément il fait apparaître le <ul> fils en le positionnant par rapport a son parent (= l’élément survolé). Il le place à 150px du bord gauche (left:150px) donc il par de la gauche et il le décale de la largeur pile du menu. Donc 150px vers la droite vu qu'il part de la gauche.

Si jamais tu veux le même effet mais inversé il suffit de remplacer le left:150px; par un right:150px; (déplacer de 150px en partant du bord droit, donc vers la gauche).

Par contre c'est un peu déroutant de faire un menu déroulant vers la gauche, le sens de lecture étant de gauche à droite ici...

Bon j’espère que j'ai réussi à me faire comprendre j'ai pas l'impression d’être super clair... c'est dimanche en même temps Smiley cligne

bonne continuation
Une toute dernière question.

Apres test c'est vrais que ce n'est pas terrible, le mieux serait en descendant, mais je pensais qu'en changeant left ou right comme vu plus haut par bottom suffirais, et bien non.

???
Modérateur
Et bien comme tu le dit : non car ton sous menu est positionné en absolute ce qui le fait sortir du flux (si tu n'es pas familier avec ce terme je te conseil de t'en rapprocher en lisant des articles car c'est une notion de base fondamentale).
Il suffit d'enlever ce positionnement pour le laisser au bon endroit = dans son parent. En gros :
.navigation ul {
        display: none;
/*
        left: -999em;
        position: absolute;
*/
    }

Ce qui aura pour effet d'étirer le parent quand le sous menu va apparaitre (top, left, right etc ne servent plus). Par contre la encore attention (tu verras si tu teste) car au survol ça va devenir presque inutilisable si ton menu change de hauteur à chaque fois... pas simple hein ! Smiley langue
Merci beaucoup, grâce à toi je viens de comprendre plusieurs chose, ce qui est fort intéressant, et j'espère que ce post serviras a d'autre personne. Smiley cligne

Merci beaucoup pour ton aide précieuse!!! Smiley ravi
Sujet clos
Aller à