menu déroulant css html

**gabrielle32** · 18/05/2009, 14h25

Salut à tous!

J'ai un menu déroulant en html et css qui fonctionne très bien ici (http://paysdetrie.fr/dev1/spip.php?page=index), que ce soit sous Ie ou Firefox.

Par contre, sur cette page: http://paysdetrie.fr/dev1/spip.php?page=index2
le menu fonctionne mal sous firefox puisqu'il ajoute plus d'onglet qu'il ne faudrait, et sous ie il ne fonctionne pas du tout.

Quelqu'un peut-il m'aider?

Merci.

**Poulpynette** · 18/05/2009, 14h30

Bonjour,

Chez moi tout fonctionne très bien sous FFX 3.
En revanche, IE6 ne parvient carrément pas à afficher la page pour le deuxième lien.

Pour t'aider, le HTML et le CSS seraient bienvenus (nettoyés).

**gabrielle32** · 18/05/2009, 14h53

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index Pascal</title>
<link rel="stylesheet" href="squelettes/style_accueil_bleu.css" type="text/css" media="all" />
<link rel="stylesheet" href="squelettes/menu_style.css" type="text/css" media="all" />
 
</head>
 
<body>
 
    <div id="banniere"></div>
   <body>	<br>
	<br>
	<div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
          <li>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>
					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>

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
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
 
body
{
behavior: url(csshover.htc);/*étant donné que ie 6 et les versions plus anciennes n'interprètent pas les "hover", il faut insérer le fichier csshover.htc dans squelettes et l'appeler dans notre style css (forcer ie à interpréter les hover*/
}
.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font-family:verdana,geneva,arial,helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	color:8e8e8e;
	}
.menu ul{
	background:url(img/menu-bg.gif) top left repeat-x;
	height:43px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		}
	.menu li a{
		color:#666666;
		display:block;
		font-weight:bold;
		line-height:43px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover{
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:#e0e0e0;
		border-left:2px solid #0079b2;
		border-right:2px solid #0079b2;
		border-bottom:2px solid #0079b2;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		opacity:0.95;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		width:225px;
		}
	.menu li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover{
			background:#949494;
			color:#000000;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.menu p{
		clear:left;
		}	
	.menu #current{
		background:url(img/current-bg.gif) top left repeat-x;
		color:#ffffff;
		}

menu déroulant css html

CSS

Vue hybride

Discussions similaires

Partager

Partager