28172 sujets

CSS et mise en forme, CSS3

Petit coup de main: menu déroulant

Bonjour

Je travaille sur mon modèle de menu déroulant.; j'y suis presque....
Mais problème les sous-menus restent collés completement à gauche....

attention: toutes mes excuses mais mon site de développement est completement "bazar" car je retravaille sur le thème..
http://plx.cahue.net
pour les exemples : coloration syntaxique, rubrique 1, rubrique 2

le code:

/** --- NAVIGATION PRINCIPALE : MENU PERSONNALISE --- */

#website-nav {                      
    padding: 12px 24px 12px 24px;
    background-color: #444;
    font-size: 1.2em;
    /*-webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;*/
}

    /* Menu principal horizontal centré */
        
    #website-menu {                 
        margin-top:12px;
        margin-bottom: 12px;
        text-align: center;
        font-size: 0.9em;
    }
    
        #website-menu li {
            display: inline; /* les éléments côte à côte et non les uns en dessous des autres  */
            width: 200px;
            margin-right: 12px; 
            color: #ccc;
            border: solid green;
        }

        #website-menu li:first-child {
            margin-left: 12px; 
        }
        
            #website-menu li a {              
                /*display: inline-block;
                width: 110px; 
                padding: 12px 0;
                background-color: #444;*/
                color: #ccc;
                /* font-weight: bold;
                text-align: center;
                -webkit-border-radius: 5px;
                   -moz-border-radius: 5px;
                        border-radius: 5px;*/
            }
                
            #website-menu li a:hover,
            #website-menuli a.active {
                    color: #eee;                    
            } 
            
            #website-menu li:hover > ul { 
                display: block;    /* pour faire apparaitre notre sous menu au survol du menu de premier niveau */
            }
            
        /* Menu déroulant de niveau 2 */   

        #website-menu  ul  { 
            position: absolute;
            display: none;
            overflow: hidden;
            /* width: 200px;*/
            border: solid blue;         
        }
        
            #website-menu ul li {
                clear: both;
                display: block;
                /* width: 200px; */
                text-align: left;
            }
            
                #website-menu  ul li a {
                    /* width: 180px; */
                    padding: 10px; 
                    margin: 5px 0;
                    line-height: 1.2em;
                    text-align: left
                }
                
                #website-menu ul li:hover ul {
                    height: auto; 
                    padding: 20px 0;
                }

Modifié par cpalo (25 Mar 2014 - 12:48)
Il faut pour cela bien comprendre l'utilisation des position en CSS pour cela tu à un article sur alsa.

Dans ton cas, il suffit d'appliquer à au li qui contient ton menu déroulant la propriété position relative.
Mais tu comprendra pourquoi en lisant l'article.
J'ai bien été relire cet article que j'avais déjà lu.; et il est vrai que le positionnement c'est un peu complexe.
Mais dans mon cas en mettant relative là où tu me dis, ça ne règle pas le problème.
En fait il faut mettre float: left; dans #website-menu li {

tout en conservant : position: absolute; dans #website-menu ul {
Modifié par cpalo (25 Mar 2014 - 16:33)
Tu met 
#website-menu li{position : relative;}

et t'enlève le overflow hidden de ton "website-wrapper" et ca marche.

Si tu as bien lus l'article, tu verra que le float est quelque chose à éviter le plus possible, ca rend des service mais mieux vaut quand c'est possible utiliser les positions, et même privilégié dans un premier temps les décalage à coup de marges.
Bonjour

enlever le float à a réglé mon problème de vouloir centrer mon menu.
Par contre les sous-menus déroulant à nouveau ne s'affichent pas sous leur menu principal.
Je vais reprendre mon menu à zéro en" dehors du site" pour voir s'il fonctionne autrement
Sujet clos
Aller à