Discussion :

[Eisy]

Bonjour,

J'ai un menu déroulant qui fonction du tonnerre sur Firefox mais qui ne marche pas sous ie6.

Le problème est que au survol du menu le hover se fait bien puisque le menu change de couleur de fond etc.. mais le sous menu n'apparait pas alors que sous firfox si.

CSS correspondant au menu:

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
 
ul.menulist li ul{ display:none; }
 
ul.menulist li:hover>ul{ display:block;}
 
ul.menulist,
ul.menulist ul{
 /*background:#008bbe;*/
 /*border:1px solid #FFFFFF;*/
 /*border-bottom: 0px;*/
 list-style:none;
 margin:0px;
 padding:0px;
 width:320px;
 _width:320px;
}
 
ul.menulist ul{
 position:absolute;
 top:-1px;
 left:315px;
 width:270px;
}
 
ul.menulist li{
 position:relative;
 margin:0px;
 padding:0px;
 /*border-bottom: 1px dashed #dadada;*/
 border:1px solid #ffffff;
 
}
 
ul.menulist a{
 display:block;
 _width: 100%;
 /*color:#FFFFFF;*/
 text-decoration:none;
 padding: 5px;
}
 
ul.menulist a:hover{
 background:#006080;
 color:#FFFFFF;
}
 
ul.menulist li a{
    background-image: url(./images/arrow.gif) !important;
    background-position: 310px;
    background-repeat: no-repeat;
	background-color:#e0e0e0;
}
 
ul.menulist li a:hover{
 background:#006080;
 color:#FFFFFF;
 background-image: url(./images/arrowb.gif) !important;
 background-position: 307px;
 background-repeat: no-repeat;
}

et la le html:.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul class="menulist">
    <li>
        <h4><a href="#">blabla</a></h4>
        <ul>
	    <li class="smenu">
		<a href="#URL_ARTICLE">blabla</a> 
	    </li>
 
	</ul>
    </li>
</ul>

[Linaa]

Bonjour,

IE ne reconnait la pseudo-classe :hover uniquement pour les liens (sur la balise a)

[Eisy]

Mon html est donc correct puisque le titre du menu ainsi que celui du sous menu sont entre des balises <a> et en ajoutant au css

Code :

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

ul.menulist li a:hover>ul{ display:block;}

sous firefox cela ne marche plus et ie n'est pas plus avancé.

[Linaa]

C'est normal que ça ne fonctionne pas, puisque d'après ton code HTML (cf. premier post), les éléments li n'ont pas d'éléments a descendants.
Le CSS que tu as mis, ne s'applique donc à rien.

Et comme ceci ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="menulist">
    <li>
        <a href="#">
            <h4><a href="#">blabla</a></h4>
            <ul>
	        <li class="smenu">
		    <a href="#URL_ARTICLE">blabla</a> 
	        </li>
 
	    </ul>
        </a>
    </li>
</ul>

[Eisy]

Comme ceci cela ne marche pas j'ai 3 liens apres dans mon 1er menu et le sous menu ne passe pas.
Voila le code que j'ai testé avec le même css sauf la ligne

Code :

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

1
2
 
ul.menulist li a:hover>ul{ display:block;}

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
 
    boucle spip1
	<ul class="menulist">
		<li>
		    <a href="#">
		    <h4>blabla</h4>
		    <ul>
			boucle spip2
			<li class="smenu">
				<a href="#URL_ARTICLE">blabla</a> 
			</li>
			fin boucle2
			</ul>
			</a>
		</li>
	</ul>
fin boucle1

[Eisy]

Après différent teste et recherche je n'arrive toujours pas à avoir un menu déroulant sous ie sans utilisé de javascript.

[Eisy]

Pour ceux que cela interesse voila le lien sur lequel je me suis appuyé pour faire un menu déroulant en css compatible ff et ie6 :

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