Menu CSS : les sous menus ne s'affichent pas
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:
1
2
|
#dvShowRoom0 ul li:hover ul.sousMenuUL {display : block;} |
Je suis sur une structure suivant
Code:
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:
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 & 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.
