Bonjour à tous 
Je suis en train de créer un menu déroulant pour mon site. J'ai donc suivi le tutoriel approprié, et je me lance dans mon menu vertical. J'ai compris le principe et tout et tout, mais lorsque je passe la souris sur un des liens (normal quoi
) le menu se superpose avec les liens situés en-dessous. Je suppose qu'il existe sûrement une propriété CSS pour y remédier et c'est là que vous intervenez si vous avez une idée:D Merci de votre aide !
J'ai un bout de JavaScript
Et voici mon CSS complet
Merci pour votre aide
Si ce n'est pas possible, j'envisage de créer un menu vertical, donc en haut de ma page. Pourriez-vous me rappeler ce qu'il faut modifier ? Il me semble que c'est du CSS, au niveau de la balise float, non ?
Bonne soirée à tous ![/i][/i]
Modifié par Leo46 (21 Oct 2007 - 18:07)
Je suis en train de créer un menu déroulant pour mon site. J'ai donc suivi le tutoriel approprié, et je me lance dans mon menu vertical. J'ai compris le principe et tout et tout, mais lorsque je passe la souris sur un des liens (normal quoi
) le menu se superpose avec les liens situés en-dessous. Je suppose qu'il existe sûrement une propriété CSS pour y remédier et c'est là que vous intervenez si vous avez une idée:D Merci de votre aide !J'ai un bout de JavaScript
1.
<script type="text/javascript">
2.
sfHover = function() {
3.
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
4.
for (var i=0; i<sfEls.length; i++) {
5.
sfEls[i].onmouseover=function() {
6.
this.className+=" sfhover";
7.
}
8.
sfEls[i].onmouseout=function() {
9.
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
10.
}
11.
}
12.
}
13.
if (window.attachEvent) window.attachEvent("onload", sfHover);
14.
</script> Et voici mon CSS complet
1.
body
2.
{
3.
width: 750px;
4.
margin-top: 20px;
5.
margin-bottom: 20px;
6.
margin: auto;
7.
font-family : "Comic Sans MS", "Arial Black", serif;
8.
color: white;
9.
background-color: black;
10.
}
11.
12.
13.
14.
#en_tete
15.
{
16.
width: 850px;
17.
height: 220px;
18.
background-image: url("http://leocomputer.free.fr/Banniere.jpg");
19.
background-repeat: no-repeat;
20.
margin-bottom: -60px;
21.
margin: auto;
22.
color: white;
23.
background-color: black;
24.
25.
}
26.
27.
#menu
28.
{
29.
float: left;
30.
width: 150px;
31.
margin-right: 20px;
32.
}
33.
34.
#menu, #menu ul /* Liste */
35.
{
36.
padding : 0;
37.
margin : 0;
38.
list-style : none;
39.
text-align : justify;
40.
}
41.
42.
#menu a /* Contenu des listes */
43.
{
44.
display : block;
45.
padding : 0;
46.
}
47.
48.
#menu li /* Elements des listes */
49.
{
50.
float : left;
51.
}
52.
53.
html>body #menu li
54.
{
55.
border-right: 1px solid transparent ;
56.
}
57.
58.
#menu li ul /* Sous-listes */
59.
{
60.
position: absolute;
61.
width: 144px;
62.
left: -999em;
63.
}
64.
65.
66.
#menu li ul li /* Eléments de sous-listes */
67.
{
68.
border-top : 1px solid #fff;
69.
}
70.
71.
html>body #menu li ul li
72.
{
73.
border-top : 1px solid transparent;
74.
}
75.
76.
#menu li ul ul
77.
{
78.
margin : -22px 0 0 144px ; /
79.
border-left : 1px solid #fff ;
80.
}
81.
82.
html>body #menu li ul ul
83.
{
84.
border-left : 1px solid transparent;
85.
}
86.
87.
#menu a:hover/
88.
{
89.
color: white;
90.
background: rgb(5,218,218);
91.
}
92.
93.
#menu li:hover ul ul, #menu li.sfhover ul ul
94.
{
95.
left: -999em;
96.
}
97.
98.
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
99.
{
100.
left: auto;
101.
min-height: 0;
102.
}
103.
104.
.element_menu
105.
{
106.
color: white;
107.
background-image: url("http://leocomputer.free.fr/Background_Menu.jpg");
108.
background-repeat: repeat-x;
109.
margin-bottom: 100px;
110.
}
111.
112.
.element_menu h3
113.
{
114.
font-family: "Comic Sans MS", "Arial Black", "Times New Roman", serif;
115.
text-align: center;
116.
margin-bottom: 10px;
117.
}
118.
119.
.element_menu ul
120.
{
121.
list-style-image: url("images/puce.png");
122.
padding: 0px;
123.
padding-left: 20px;
124.
margin: 0px;
125.
margin-bottom: 10px;
126.
}
127.
128.
.element_menu li
129.
{
130.
margin-bottom: 10px;
131.
}
132.
133.
.element_menu a
134.
{
135.
color: white;
136.
}
137.
138.
.element_menu a:hover
139.
{
140.
background-color: rgb(5,218,218);
141.
color: black;
142.
}
143.
144.
a
145.
{
146.
color:white;
147.
background-color: transparent;
148.
}
149.
150.
151.
a:hover
152.
{
153.
color: white;
154.
background-color: rgb(5,218,218);
155.
}
156.
157.
#corps
158.
{
159.
padding: 5px;
160.
color: white;
161.
background-repeat: repeat-x;
162.
background-color: black;
163.
}
164.
165.
#pied_de_page
166.
{
167.
padding: 5px;
168.
text-align: center;
169.
color: white;
170.
background-color: rgb(0,0,1);
171.
background-repeat: repeat-x;
172.
border: 2px solid black;
173.
margin-left: 20px;
174.
}Merci pour votre aide
Si ce n'est pas possible, j'envisage de créer un menu vertical, donc en haut de ma page. Pourriez-vous me rappeler ce qu'il faut modifier ? Il me semble que c'est du CSS, au niveau de la balise float, non ?
Bonne soirée à tous ![/i][/i]
Modifié par Leo46 (21 Oct 2007 - 18:07)