CSS : menu déroulant

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par rudddy, 26 Septembre 2009.

  1. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    Bonjour,

    j'ai fait un menu en CSS horizontal, avec un sous menu déroulant vertical en CSS aussi

    le souci est que le sous menu ne s'affiche pas juste en dessous du menu mais avec un padding de 20 px entre les 2 (question de graphisme), le souci est donc que quand je survole mon menu, mon sous menu vertical s'affiche mais quand je veux passer dessus avec la souris, mon sous menu disparait, du aux 20 px d'écart entre le menu et le sous menu

    je sais pas si j'ai été très clair mais en tout cas, si quelqu'un a une solution

    merci
     
  2. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    le week end s'est bien passé ? 40 vus mais pas de réponse, pourtant je sais qu'il y a des pros du css sur ce forum ...

    merci à tous

    yves
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 696
    J'aime reçus:
    177
    Sans ton code HTML & CSS c'est pas facile pour t'aider.
     
  4. slc71
    slc71 WRInaute discret
    Inscrit:
    9 Juin 2009
    Messages:
    142
    J'aime reçus:
    0
    ben c'est normal t as un trou dans ton menu donc dès que tu tombes dedans ton menu ce referme.
    il suffait de trouver ta ligne css avec le fameux padding et de le mettre à 0 comme ça plus de trou et ton sous menu ne disparaitra plus
    :wink:
     
  5. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    html

    Code:
    <ul> 
     
            <li class="deux_lignes"><a href="#">Présentation<br />du programme</a></li> 
            <li class="deux_lignes"><a href="#">Déroulé<br />d'une séance</a></li> 
            <li><a href="#">Suivi</a></li> 
            <li class="deux_lignes" id="sousmenu"><a href="#">Observations<br />scientifiques</a> 
                <ul class="niveau2"> 
     
                    <li><a href="#">La Vallée des Immortels</a></li> 
                    <li><a href="#">La Mer Morte</a></li> 
                    <li><a href="#">L'étude SUIVIMAX</a></li> 
                    <li><a href="#">Le programme d'enrichissement cérébral M.F.</a></li> 
                    <li><a href="#">L'Espérance de Vie en Bonne Santé</a></li> 
                </ul> 
     
            </li> 
            <li><a href="#">Témoignages</a></li> 
            <li class="deux_lignes"><a href="#">Informations<br />Contact</a></li> 
          </ul>
    et le css :

    Code:
    /*------------------------------------------------menu--------------------*/ 
    #header ul{ 
        height:53px; 
        position:absolute; 
        top:198px; 
        left:233px; 
        margin: 0px;/* 
        z-index: 5;*/ 
    } 
     
    #header ul li { 
        width: 117px; 
        height: 53px; 
        float:left; 
        background-image:url(images/fond_menu.png); 
        background-repeat:no-repeat; 
        color: #FFFFFF; 
        font-weight: bold; 
        text-align:center; 
        padding-top: 13px; 
        font-size: 13px; 
    } 
     
    #header ul li a{ 
        color: #FFFFFF; 
        text-decoration: none 
    } 
    #header ul li a:hover{ 
        text-decoration: underline; 
    } 
     
    #header ul li.deux_lignes { 
        width: 117px; 
        height: 53px; 
        float:left; 
        background-image:url(images/fond_menu.png); 
        background-repeat:no-repeat; 
        color: #FFFFFF; 
        font-weight: bold; 
        text-align:center; 
        padding-top: 6px; 
        font-size: 13px; 
    } 
     
     
    #header ul ul { 
        position: absolute; 
        top: 72px; 
        width: 250px; 
        padding:0; 
        padding-left: 21px; 
        display: none; 
        z-index:500; 
    }    
    #header ul ul li{ 
        background-image: url(images/fond-sous-menu.png); 
        background-repeat: repeat-y; 
        list-style-type: disc; 
        width: 250px; 
        height: 20px; 
        padding-top:0; 
        text-align: left; 
        padding-left: 20px; 
        font-size: 10px; 
     
    } 
    #header ul ul li:hover{ 
        background-image:url(images/fond-sous-menu_over.png); 
        background-repeat: repeat-y; 
        color: #000000; 
    } 
     
    #header ul ul li a{ 
        color: #ffffff; 
        text-decoration:none; 
    } 
    #header ul ul li a:hover{ 
        color: #000000; 
        background-image:url(images/fond-sous-menu_over.png); 
        background-repeat: repeat-y; 
        text-decoration: none; 
    } 
     
    #header ul li#sousmenu:hover ul.niveau2 { 
        display:block; 
    } 
    @slc71 : si je supprime le padding, ça me gache mon template (en gros, ce n'est pas envisageable pour moi)
     
  6. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    une solution ?
     
  7. lefou
    lefou WRInaute discret
    Inscrit:
    7 Juin 2005
    Messages:
    133
    J'aime reçus:
    0
    Dans ton cas je pencherais plutôt vers une solution javascript avec un settimeout pour mettre un délai avant la fermeture du menu. Personnellement je ne pense pas que tu puisses gérer cela avec les css uniquement par rapport aux contraintes de ta charte graphique.
     
  8. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    merci de ta contribution

    j'attens de voir si qqn a une solution sinon j'adapterais mon template et c'est tout
     
  9. slc71
    slc71 WRInaute discret
    Inscrit:
    9 Juin 2009
    Messages:
    142
    J'aime reçus:
    0
    pourquoi n est ce pas compatible avec ton template actuel? possible de voir ce site en travaux pour comprendre car là je vois pas
     
  10. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    http://avima.fr/v0

    il faut que le sous menu s'affiche en dessous de la barre bleu dégradé ou il y a le menu de recherche / flux rss

    (c'est pas moi qui ai fait le tmeplate, je fais juste l'intégration)
     
  11. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 696
    J'aime reçus:
    177
    C'est tout à fait normal que le sous menu s'en va, là on est tous d'accord.
    Mais c'est dû au position:absolute et top:72px du sous menu

    J'y suis presque arrivé comme ceci:
    En modifiant la position top de 72px à 42px:
    Code:
    #header ul ul {
    	position: absolute;
    	top: 42px;
    	width: 250px;
    	padding:0;
    	padding-left: 21px;
    	display: none;
    }
    
    Et en ajoutant:
    Code:
    #header ul ul li:first-child
    {
    padding-top:30px;
    }
    
    Pour mettre du padding-top au premier <li> du sous menu

    Là le menu ne disparait plus, mais je n'arrive pas à avoir ton div#recherche au dessus du sous menu.
     
  12. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    super ça a l'air pas mal


    pour ton dernier souci, il suffit de rajouter un z index sur le div recherche

    je teste et je te fais un retour

    merci
     
  13. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 696
    J'aime reçus:
    177
    J'ai testé en modifiant le z-index, ça ne fonctionnait pas, mais faut dire que j'ai testé via "Edit CSS" de l'extension WebDevelopper, à creuser...
     
  14. rudddy
    rudddy WRInaute passionné
    Inscrit:
    1 Août 2007
    Messages:
    2 190
    J'aime reçus:
    0
    c nickel merci beaucoup

    donc en mettant un grand padding top sur le premier li avec une image de fond de menu dont la partie supérieure est transparente ça donne ce que je voulais

    merci spout une reco !!!
     
Chargement...
Similar Threads - CSS menu déroulant Forum Date
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
Indexation avec fil d'ariane composé de menus déroulants css Référencement Google 27 Avril 2013
Menu déroulant sur image css Développement d'un site Web ou d'une appli mobile 5 Janvier 2012
Menu déroulant CSS Développement d'un site Web ou d'une appli mobile 19 Décembre 2009
Menu déroulant full CSS et z-index... Développement d'un site Web ou d'une appli mobile 6 Février 2009
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[résolu]menu déroulant css Référencement Google 4 Juin 2008
Menu déroulant en CSS Développement d'un site Web ou d'une appli mobile 16 Avril 2008
MENU VERTICAL CSS (3 minis questions) Développement d'un site Web ou d'une appli mobile 4 Décembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice