Menu CSS : les sous menus ne s'affichent pas

**pci130** · 29/05/2009, 17h33

Bonjour,

Voila j'ai un gros soucis et j'ai besoin de votre aide et je vous remercie d'avance. je fonctionne sous IE et FF

Le code qui suit est pour faire un menu en css malheureusement je n'arrive pas à ouvrir mon 2ieme UL.

le code qui je pense dois faire l'ouverture, j ai essaye plein de choses dérivés du code suivant

Code :

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

1
2
 
#dvShowRoom0 ul li:hover ul.sousMenuUL {display : block;}

Je suis sur une structure suivant

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<ul>
     <li>xxxxxx
           <ul>
                <li>xxxxxx</li>
                <li>xxxxxx</li>
                <li>xxxxxx</li>
           </ul>
     </li>
</ul>

LE CODE :

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<html>
<head>
<style type="text/css">
/* style des liens */
#dvShowRoom0 li a:visited       {text-decoration: none;color: #000000;}
#dvShowRoom0 li a:link          {text-decoration: none;}
#dvShowRoom0 li a:active        {text-decoration: none;}
#dvShowRoom0 li a:hover         {text-decoration: underline;}
 
#dvShowRoom0 li a:link
{
        height                          : 1%;
        color                           : #000000;
        margin                          : 0;
        padding                         : 1px 1px;
}
/* style des liens FIN */
 
#dvShowRoom0
{
        list-style-type         : none;
        margin                          : 0;
        padding                         : 0;
        border                          : 0;
}
 
#dvShowRoom0 ul
{
        white-space                     : nowrap;
        background-color        : #FFFFFF;
        color                           : #000000;
        border                          : solid #c0c0c0 2px;
        padding                         : 5px;
        margin-left                     : -0px;
        margin-top                      : 0px;
        text-align                      : left; 
        display                         : none;
}
 
#dvShowRoom0 ul li
{
        white-space                     : nowrap;
        padding-top                     : 2px;
        padding-bottom          : 2px;
        color                           : #000000;
        /* Si on souhaite mettre une puce
        background-image        : url(../Images/puce-grise-rubrique.gif);
        background-repeat       : no-repeat;
        background-position : 1% 50%;
        */
}
 
#dvShowRoom0 ul li a:hover ul.sousMenuUL 
{display: block;}
 
#dvShowRoom0 ul li ul.sousMenuUL 
{
        list-style                      : none; 
        position                        : absolute;
        z-index                         : 500;
        display                         : none; /*pour le cacher mon 2ieme UL*/
        top                                     : -2px;
        left                            : 100%;
}
 
 
</style>
 
</head>
<body>
<div id="dvShowRoom0">
 
<table cellspacing="0" cellpadding="0" border="0">
 
	<td style="padding-left: 1px" 				
		onmouseover="javascript:document.getElementById('XDXGJWPQZA5292009171420_1048647044').style.display='block'" 
		onmouseout="javascript:document.getElementById('XDXGJWPQZA5292009171420_1048647044').style.display='none'">
 
		<table cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td valign="top"></td>
			<td class="ongletContenu" >
				<a class="ongletLien" href="xxx">Dessin scolaire et professionnel</a>
			</td>
			<td valign="top"></td>
		</tr>
		</table>
 
		<ul id="XDXGJWPQZA5292009171420_1048647044" style="list-style-type: none; list-style-image: none; list-style-position: outside; position: absolute; display: none;">
			<li><a href="xxx">Tableaux et ardoises</a>
				<ul class="sousMenuUL">
					<li><a href="xxx">Ardoises/tableaux effacables a sec</a></li>
					<li><a href="xxx">Accessoires tableaux effac.a sec</a></li>
					<li><a href="xxx">Ardoises &amp; tableaux usage craie</a></li>
					<li><a href="xxx">Craies pour tableaux</a></li>
					<li><a href="xxx">Accessoires tableaux-ardoises craie</a></li>
					<li><a href="xxx">Tableaux de conference</a></li>
					<li><a href="xxx">Recharges tableaux de conference</a></li>
				</ul>
			</li>
		</ul>
	</td>
</table>
</div>
<script language="javascript" type="text/javascript" >
function Fct_LinkLI(objLI, OnOff)
{
        if (OnOff=='ON')
        {
                objLI.style.backgroundColor = "#C0C0C0"
                objLI.style.color = "#000000"
        }
 
        if (OnOff=='OFF')
        {
                objLI.style.backgroundColor = "#1E3D7F"
                objLI.style.color = "#FFFFFF"
        }
}
</script>
</body>
</html>

Merci d'avoir lu mon post.

**12monkeys** · 29/05/2009, 18h18

Bonsoir

Regarde ce tutoriel : http://css.developpez.com/tutoriels/menu-deroulant/, il explique comment faire ce que tu veux...

**pci130** · 29/05/2009, 18h33

Merci à toi.

Je vais y voir de ce pas. --> clic-clic-backspace

C'est le celui dont je me suis servi pour faire mon menu, j'ai du louper kke chose.

Ps: j ai rajoute ca

Code :

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

#dvShowRoom0 ul li:hover > .sousMenuUL { display: block; }

ca fonctionne mais quand je dirige ma souris vers le nouveau panel qui c'est ouvert ben tout disparait :/ mais bon ca doit être une petite couille que j' ai pas vu ^^

Sinon j ai ca sous FF mais sous IE rien à faire

Bye

Menu CSS : les sous menus ne s'affichent pas

CSS

Discussions similaires

Partager

Partager