CSS : menu déroulant

WRInaute passionné
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
 
WRInaute passionné
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
 
WRInaute discret
rudddy a dit:
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
:wink:
 
WRInaute passionné
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)
 
WRInaute discret
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.
 
WRInaute discret
rudddy a dit:
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
 
WRInaute passionné
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)
 
WRInaute accro
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.
 
WRInaute passionné
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
 
WRInaute accro
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...
 
WRInaute passionné
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 !!!
 
Discussions similaires
Haut