28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sous menu déroulant qui disparait au passage de la souris

Bonjour

Je développe un menu css avec un sous menu déroulant sur l'option "Portrait" du menu.

Mais j'ai un souci :

- Quand je passe la souris sur l'option "Portrait", le sous menu se développe correctement au dessus de "Portrait", mais quand je passe la souris sur le sous-menu pour sélectionner une de ses options, celui-ci disparait... Smiley decu 

@charset "UTF-8";
#menu, #menu ul /* Liste */    
{	
	width: 630px;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0;
	border: 0;
        list-style : none;
        text-align : center;
}

#menu /* Ensemble du menu */
{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size : 10px;
}

#menu a /* Contenu des listes */
{
        padding-right : 0.4em;
	padding-left : 0.4em;
        color:#000;
        text-decoration : none;
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color:#bcb9a9;
}

#menu li /* Elements des listes */      
{ 
        float : left; 
}

#menu li ul /* Sous-listes */
{ 
        position: absolute;
        width: 70px;
        left: -999em; /* Hop, on envoie loin du champ de vision */
	margin: -5.5em 0 0 -0.4em;	
}

#menu li ul li /* Éléments de sous-listes */
{
        border-top : 1px solid #000 ;
	width: 70px;		
	background:#787769;
	text-align : left;
	line-height : 18px;
}

#menu li:hover ul, #menu li.sfhover ul /* Sous-listes lorsque la souris
passe sur un élément de liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}


Merci d'avance pour votre aide Smiley smile
Modifié par pasc06 (09 Dec 2009 - 19:24)
Apparemment c'est cette ligne qui pose souci :

left: -999em; /* Hop, on envoie loin du champ de vision */


Si on la supprime, le sous menu est tout le temps apparent, mais ne disparait plus quand on passe la souris dessus.

Je débute en CSS je ne trouve pas la solution... Smiley decu Comment résoudre ce problème ?
Modifié par pasc06 (09 Dec 2009 - 07:50)
Merci pour ta réponse, mais ce menu est déjà développé avec javascript, notamment pour la compatibilité IE6. Je crois que le problème rencontré vient plutôt du CSS.

Pour des raisons d'ergonomie, je souhaite que le sous menu se développe au dessus du menu, et non en dessous. Si je change les marges pour qu'il apparaisse en dessous ça fonctionne. Le problème survient quand je change les marges pour qu'il apparaisse au dessus.

Par exemple si je remplace 
margin: -5.5em 0 0 -0.4em;

Par :
margin: 0.4em 0 0 -0.4em;

Le sous menu se développe maintenant sous le menu et ne disparait plus lorsqu'on passe la souris dessus. Mais je souhaite qu'il apparaisse au dessus du menu !

Merci de votre aide
Modifié par pasc06 (09 Dec 2009 - 07:50)
Passe tes liens principaux '#menu a' en display : block car ils ne le sont pas et j'imagine que tu a mis l'apparition de ton menu sur le over et la disparition sur le out.
Et essaye de mettre sur '#menu li ul li' le border: 1px solid white; histoire de mieux voir pour debugger.
Merci pour ton aide

J'ai ajouté display:block; comme tu me l'as suggéré, mais ça ne fonctionne pas. J'ai maintenant un bug sur l'affichage des barres verticales "|" de séparation qui s'affichent en dessous alors qu'elle doivent s'afficher entre les options du menu.
#menu a /* Contenu des listes */
{
display : block;
padding-right : 0.4em; /* aucune marge intérieure */
padding-left : 0.4em;
color:#000; /* couleur du texte */
text-decoration : none; 
}


Comment faire pour réafficher correctement les barres verticales de séparation ?

Merci pour votre aide.
Modifié par pasc06 (09 Dec 2009 - 08:48)
Pour résoudre le problème des barres verticales, il faut modifier le #menu li de cette façon :

#menu li /* Elements des listes */      
{ 
float : left; 
border-right:1px solid #000000;
padding:0 4px; 
}


Il me reste toujours le problème du sous menu qui disparait au passage de la souris... Smiley confus

Comment faire pour supprimer ce problème ? Merci d'avance pour votre aide ! Smiley cligne
Modifié par pasc06 (09 Dec 2009 - 08:48)
bonsoir,

comme dit ailleurs Smiley smile , ton menu s'ouvre sur l'évènement onmouseover ou son pseudo en css li:hover et comme tu affiches le sous menu en dehors de la zone d'affichage de li , il se referme sitôt que la souris quitte la zone de li .

Par ailleurs , si tu met du "flash" dans ton #header , le sous-menu restera dessous , invisible et inaccessible autrement que part éventuellement le clavier .
Bonjour et merci pour ton aide Smiley smile

Désolé je débute en css et je ne comprends pas quelle est la solution... Smiley decu
J'ai récupéré ce menu sur un tutoriel et j'essaie de l'adapter pour mon site. Ca fait maintenant 3 jours que j'essaie de régler ce problème et je suis en train de devenir zinzin ! Smiley biggol

Effectivement sur d'autres pages du site j'ai des flash dans le header, mais logiquement l'ajout de la ligne
params.wmode = "transparent";
dans les FlashVars rend le flash transparent et devrait empêcher que le sous menu soit caché sous le flash.

Il ne me reste quasiment plus qu'à résoudre ce problème de sous menu récalcitrant et mon site est terminé.

Aidez-moi svp ! Avant que ma raison ne vacille ! (elle est déjà bien entamée...!)
Modifié par pasc06 (09 Dec 2009 - 07:11)
Une personne m'a donné la solution sur un autre forum. Compte tenu de mon niveau en CSS je n'aurai jamais trouvé la réponse seul et ça faisait 3 jours que je tournais en rond sur ce problème !

Les corrections ont été effectuées sur #menu li et #menu li ul

Je remets tous les codes, si ça peut empêcher quelqu'un d'autre de devenir zinzin !

Côté html :
<ul id="menu">
<li><a href="#">Accueil</a></li>
    <li>
	<a href="#">Portrait</a>
	<ul>
		<li><a href="#">Extérieur</a></li>
		<li><a href="#">Studio</a></li>
	</ul>
    </li>
        
    <li><a href="#">Cérémonie</a></li>
    <li><a href="#">Corporate</a></li>
    <li><a href="#">Evénementiel</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Photothèque</a></li>
    <li><a href="#">Contact</a></li>   
</ul>


Côté javascript pour rendre le menu compatible IE6 :
<!--[if lte IE 6]>
<script type="text/javascript">
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->


Côté CSS :
@charset "UTF-8";

#menu, #menu ul /* Liste */    
{	
width: 630px;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
border: 0;
list-style : none;
text-align : center; 
}

#menu /* Ensemble du menu */
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

#menu a /* Contenu des listes */
{
display : block;
padding-right : 0.4em;
padding-left : 0.4em;
color:#000;
text-decoration : none; 
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
color:#bcb9a9;
}

#menu li /* Elements des listes */      
{ 
float: left; 	
border-right:1px solid #000;
padding:0 4px;
position:relative;
z-index:2;
}

#menu li ul /* Sous-listes */
{ 
position: absolute;
width: 70px;
left: -999em; /* Hop, on envoie loin du champ de vision */
bottom:0;
padding-bottom:1.6em; /* on remonte les listes */
}

#menu li ul li /* Éléments de sous-listes */
{
border-bottom : 1px solid #000 ;
border-right: none;
width: 70px;		
background: #787769;
text-align : left;
line-height : 18px;
}

#menu li:hover ul, #menu li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}


Merci encore !

Euh... Je ne sais pas comment on met le post en "résolu"...[/i][/i]
Modifié par pasc06 (09 Dec 2009 - 07:49)
Sujet clos
Aller à