Discussion :

[Maggus]

Bonjour

voila, j'ai mis un jolie menu défilant sur mon site, qui fonctionne très bien sous IE7, FF, Opera etc. ... mais pas sous IE6. En passant avec la souris au dessus rien ne se passe.

Voila le lien: www.eubiq.fr

Et le menu est en haut de page et, en fonctionnement normal, c'est l'onglet "Le Système" qui se déroule.

Pouvez-vous m'aider?

Merci beaucoup

Markus

P.S. D'ailleurs je ne comprends pas non plus pourquoi il y a un énorme espace à gauche du texte centrale sous IE6 (ce qui descend la vidéo en bas) et non sous IE7 ou FF.

[Er3van]

Très joli site ^^

Tu passes par quoi pour faire ton menu déroulant ?
Fonction JS ? Pseudo classe/élement ?

[Maggus]

Merci Er3van

Le menu est à 100% CSS, j'ai pris model sur ce site

http://www.cssplay.co.uk/menus/final_drop.html

et je l'ai adapté au niveau du contenu.

Le CSS ressemble à ca:

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
67
68
69
70
71
72
73
74
75
76
77
 
/*Menu CSS*/
 
#info {position:relative;}
p.bold {padding-left:15px; color:#c00;}
a.linkup {position:relative;}
a.buttonup {position:absolute; top:200px; left:650px; border:0;}
a.buttonup img {border:0;}
.gleft {float:left; margin:25px 0 10px 0;}
.gright {float:right; margin:25px 5px 10px 0;}
.grc {margin:20px 0 0 10px;}
 
 
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
.menu {width:600px; height:20px; font-size:0.85em; position:relative; ;border-right:0px solid #000;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:600px; w\idth:600px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:100px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:100px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:10px;text-decoration:none;  width:90px; height:10px; border:1px;  background:#FFFFFF; padding-left:10px; line-height:10px; text-align:center;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:100px; w\idth:90px;}
 
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited { background-color:#FFFFFF bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background-color:#FFFFFF}
.menu ul ul :hover > a.drop {background-color:#FFFFFF}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}
 
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:10px;left:0; width:150px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}
 
/* position the third level flyout menu */
.menu ul ul ul{left:100px; top:-1px; width:100px;}
 
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}
 
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
 
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#225eb6; color:#FFFFFF; height:auto; line-height:1em; padding:5px 10px; width:150px;border-width:1px 1px 1px 1px; text-align:left;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:170px;w\idth:150px;}
 
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#002E61; background:#FFFFFF;}
.menu :hover > a, .menu ul ul :hover > a {color:#002E61;background:#FFFFFF;}
 
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

[romain_ci]

Attention tu as plusieur fois

Code :

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

menu ul ul :hover > a.drop {background-color:#FFFFFF}

Met plutot ca

Code :

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

menu ul ul:hover > a.drop {background-color:#FFFFFF}

je c'est pas si ca a avoir !! mais cette espace me parait suspect

[Er3van]

Question que je me pose aussi.

Autant pour les liens il ne faut pas d'espace a:hover, autant pour les autres éléments il en faut un il me semble, ex td :hover.
Ne sachant pas vraiment à quoi c'est du je ne peux assurer mon propos, néanmoins c'est possible que ça pose problème.

Pour le coup, c'est normal que ton menu ne marche pas sous IE 6, il ne reconnait pas les pseudo classes comme :hover.