Probléme position menu deroulant ?

**jesslegende** · 17/02/2010, 22h55

bonjour,
je cherche une solution au probléme d'un menu déroulant horizontal qui lorsqu'il se deploie il est voilé par une div ce qui annule l'effet du survole, resultat pas de menu deroulant?!
aidez moi SVP.

**Erwan31** · 17/02/2010, 23h09

Bonsoir,
sans la totalité du code (HTML et CSS) ou mieux une page en ligne, il va être difficile de diagnostiquer le problème.
D'autre part tu dois nous dire sur quels navigateurs tu rencontres ce problème.

**jesslegende** · 17/02/2010, 23h18

voilà l'exemple:

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
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
    <title>menu horizontal</title>
   <!--[if !IE]> <-->
    <style type="text/CSS">
#menu li ul {
 position:absolute;
 top:30px;
 }
    </style>
<!--><![endif]--> 
 
    <!--[if IE 8]><-->
    <style type="text/CSS">
#menu li ul {
 position:absolute;
 }
    </style>
<!--><![endif]--> 
 
    <style type="text/css">
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }
 #menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
#menu {
 height:50px;
 }
 
    </style>
</head>
<body>
<div id="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>
<div style="border-left:solid 3px red; width:500px; height:150px;">
This how we do a horizontal menu deroulant</div>
</body>
</html>

pour le naviguateur j'utilise IE7.

**Erwan31** · 18/02/2010, 01h00

Normal que ça ne fonctionne pas, tu ne réserves le positionnement absolue qu'aux navigateurs hors IE et IE8 via les commentaires conditionnels.
Tu n'as pas besoin de commentaires conditionnels ici.

ça fonctionne avec ce code CSS (j'ai enlevé certaines déclaration inutiles comme les marges latérales auto) :

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
<style type="text/css" media="screen">
<!--
#menu {height:50px;}
#menu li ul {
	position:absolute;
	top:29px;
	left:0
 }
#menu ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
}
#menu > ul > li {
	float:left;
	background:black;
	position:relative
}
#menu li a {
	display:block;
	width:100px;
	padding:5px;
	background:black;
	color: #FFF;
	text-decoration:none;
}
#menu li a:hover {color:#FFD700;}
#menu ul li ul {display:none;}
#menu ul li:hover ul {display:block;}
-->
</style>

Es tu conscient que le menu ne se déroulera pas sous IE6?
Si tu vises IE6, il faudra faire certaine adaptations au niveau des styles et passer par du JS.

**jesslegende** · 18/02/2010, 18h38

je te remercie,
en fait je sais que le hover n'existé avec ie6 que pour la balise a, donc il est inutile de faire des menu en css uniquement? n'est ce pas?

**Erwan31** · 18/02/2010, 18h44

Envoyé par jesslegende

je te remercie,
en fait je sais que le hover n'existé avec ie6 que pour la balise a, donc il est inutile de faire des menu en css uniquement? n'est ce pas?

Ce n'est pas qu'il existe mais il ne s'applique qu'aux liens sur cette version et les versions antérieures.
Si ta cible est large et que le % d'utilisateur d'IE n'est pas négligeable, tu dois passer par du JS.

**jesslegende** · 18/02/2010, 19h26

je te merci bien, ton aide m'été vraiment utile.
je vais refaire les choses avec du js comme ca j'eviterai les éventuelles problémes.

Probléme position menu deroulant ?

Positionnement en CSS

Discussions similaires

Partager

Partager