CSS : menu déroulant

[rudddy]

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

[rudddy]

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

[spout]

Sans ton code HTML & CSS c'est pas facile pour t'aider.

[slc71]

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

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

[rudddy]

html

Code: Tout sélectionner

<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: Tout sélectionner

/*------------------------------------------------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)

[rudddy]

une solution ?

[lefou]

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.

[rudddy]

merci de ta contribution

j'attens de voir si qqn a une solution sinon j'adapterais mon template et c'est tout

[slc71]

merci de ta contribution

j'attens de voir si qqn a une solution sinon j'adapterais mon template et c'est tout

pourquoi n est ce pas compatible avec ton template actuel? possible de voir ce site en travaux pour comprendre car là je vois pas

[rudddy]

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)

[spout]

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: Tout sélectionner

#header ul ul {
   position: absolute;
   top: 42px;
   width: 250px;
   padding:0;
   padding-left: 21px;
   display: none;
}


Et en ajoutant:

Code: Tout sélectionner

#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.

[rudddy]

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

[spout]

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...

[rudddy]

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 !!!