Menu déroulant simple, mais une légère difficulté avec IE

Invité · 01/12/2008, 00h10

Bonjour,

Je crée un menu déroulant simple (html/css) qui à l'origne comprenait une image indiquant qu'il y a un sous-menu. Cependant, n'utilisant pas d'image, j'aimerais supprimer le style background: url...... et là IE me regarde de travers, pour FF, Safari, Opera et Chrome ok.

Voir le commentaire dans le CSS

HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/menu.css" />
    <title>Test Menu</title>
</head>
<body>
    <div id="menu">
      <ul class="niveau1">
	<li>
	  <a href="">Accueil</a>
	</li>
	<li class="sousmenu">
	  <a href="">Développement</a>
	    <ul class="niveau2">
	      <li>
	        <a href="">Javascript</a>
	      </li>
	      <li>
	        <a href="">Java</a>
	      </li>
	    </ul>
	 </li>
	 <li>
	    <a href="">menu 3</a>
	 </li>
	 <li class="sousmenu">
	    <a href="">Navigateur</a>
	    <ul class="niveau2">
	       <li>
	           <a href="">IE</a>
	       </li>
	       <li>
	           <a href="">FireFox</a>
	       </li>
	    </ul>
	 </li>
	 <li>
	     <a href="">menu 5</a>
	 </li>
       </ul>
   </div>
</body>
</html>

CSS:

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
#menu a {
	color:#000;
}
#menu ul {
	padding: 0px;
	margin: 0px;
	background: white;
	text-align: center;
}
#menu li {
	background: #CCC;
}
#menu li:hover {
	background:	#EDD
}
#menu .sousmenu:hover {
	background: #EDD;
}
#menu .sousmenu {
  /* pb ici */
	background: url(fleche.gif) 95% 50% no-repeat;
	background-color: #CCC;
}
#menu ul li {
	position: relative;
	list-style:	none;
	float: left;
	border-top:	1px solid;
}
#menu ul ul {
	position: absolute;
	display: none;
	width: 100px;
}
#menu li a {
	text-decoration: none;
	padding: 4px 0px 4px;
	display: block;
	width: 100px;
}
#menu .niveau1 .sousmenu:hover .niveau2 {
	display: block;
}

Merci pour vos futures aides.

jlmag

**c_s_s** · 01/12/2008, 09h47

Bonjour,

Envoyé par jlmag

Cependant, n'utilisant pas d'image, j'aimerais supprimer le style background: url...... et là IE me regarde de travers

Qu'est-ce que ça fait sous IE quand tu enlèves le background ?

Tu as une page en ligne ?

Invité · 01/12/2008, 10h45

Bonjour,

Bon, je ne suis pas chez moi mais j'ai effectué la modif en ligne ICI.
Cependant, de là ou je suis, Murphy est passé par là et cela fonctionne.
Il faut que je regarde de chez moi pourtant je suis me semble-t-il à la même version de IE7.

Ah, j'oubliais, IE7 décalait le sous-menu à droite du li survolé

A+

**c_s_s** · 01/12/2008, 11h33

J'avoue que cette histoire de background est étrange. La cause de ce bug m'échappe complètement.

Mais en regardant un peu le style associé au menu déroulant, il y a moyen de le simplifier un peu. En plus ça corrige le bug. Le menu fonctionne sous IE7.

Code css :

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
ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#menu li {
	background: #CCC;
	text-align:center;
	border-top: 1px solid;
}
#menu li:hover {
	background: #EDD
}
#menu .niveau1 > li {
	position: relative;
	float: left;	
}
#menu a {
	display: block;
	width: 100px; 
	padding: 4px 0px;
	color:#000; 
	text-decoration: none;
}
#menu .niveau2 {
	display: none;	
}
#menu .sousmenu:hover .niveau2 {
	display: block;
}

Invité · 01/12/2008, 19h23

Bonjour,

De retour chez moi et voilà ce que m'affiche IE7.0.5730.13 en ayant la souris sur le menu Developpement, étrange ce décalage.

et sous FF3, ok

Je teste ta solution et te dis ce qu'il en est
Merci à toi pour ton aide.

jlmag

Invité · 01/12/2008, 19h45

Re,

je viens de tester ce que tu as fais, et miracle, cela fonctionne depuis chez moi. (tu n'en doutais point, je le sais ;-) )

Je regarde le "comment et pourquoi" de tes définitions, histoire de m'améliorer!

Non obstant, je reste troublé du résultat chez moi sur IE.

Merci encore

A+

Menu déroulant simple, mais une légère difficulté avec IE

CSS

Vue hybride

Discussions similaires

Partager

Partager