Discussion :

[pasc06]

Bonjour

Je développe un menu en css et j'ai un souci :

Le sous-menu de la rubrique "Portrait" se déroule correctement au dessus du menu, mais lorsqu'on passe la souris dessus, celui-ci disparait...

Le sous menu fonctionnait parfaitement lorsqu'il se trouvait sous le menu, mais pour des raisons esthétiques, j'ai ajouté cette ligne dans le #menu li ul pour que le sous menu de la rubrique "Portrait" apparaisse au dessus du menu au lieu de en dessous.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin: -5.4em 0 0 -0.4em;

Depuis, le sous-menu de la rubrique "Portrait" se déroule correctement au dessus du menu, mais lorsqu'on passe la souris dessus, celui-ci disparait...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@charset "UTF-8";
 
#menu, #menu ul /* Liste */    
{
 
width: 630px;
letter-spacing: 0.1em;
margin: 0 auto;
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; /* Position absolue */
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 */
}

Je débute en CSS je ne trouve pas la solution... Comment résoudre ce problème ?

Merci d'avance pour votre aide

[pasc06]

J'ai ajouté display:block; dans #menu a, 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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#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.

[Macmillenium]

Bonjour,

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

Tu peux les enlever et mettre une bordure sur les LI :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#menu li {
   border-right:1px solid #000000;
   padding:0 4px; 
   float:left;
}

[pasc06]

Merci pour ton aide !

Il me reste toujours le problème du sous menu qui disparait au passage de la souris... 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 !

Comment faire pour supprimer ce problème ?

Merci d'avance pour votre aide

[CCyrillus]

bonjour/bonsoir

Pour que ton menu ne se referme pas , il faut que celui-ci se superpose en partie a son parent , afin que la souris qui se deplace se trouve toujours au dessus de li ou de ses enfants.

Pour ça , au lieu de deplacer ul au dela de la zone d'affichage de son parent li , avec une marge externe , tu peut usage d'une marge interne en le positionnent sur bottom:0 de son parent.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#menu li /* Elements des listes */      
{ 
float : left; 
position:relative;
z-index:2; /*optionnel et a redefinir selon les autres elements de la page et leur style */
}
 
#menu li ul /* Sous-listes */
{ 
position: absolute; /* Position absolue */
width: 70px;
left: -999em; /* Hop, on envoie loin du champ de vision */
bottom:0;
padding-bottom:1.6em;/* on remonte les listes avec une marge interne inferieur */
}

GC

[pasc06]

Ouf !

Merci pour ta réponse !
Ca fonctionne parfaitement ! 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 !

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

Côté html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--[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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@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 !