Bonjour,

J'ai créé un menu à 2 niveaux hiérarchiques en javascript/css. Il s'affiche correctement sous firefox et chrome par contre sous ie6, je vous dis pas, c'est très moche à voir [confus]
Si quelqu'un, un spécialiste, peut identifier la source du problème... Merci.

Code XHTML :

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
 
<!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>Document sans nom</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="scripts/menu.js"></script>
</head>
 
<body>
 
<ul id="menu" onmouseout="RestoreMenu()">
    <li onmouseover="ShowSubMenu('1')"><a id="menu1" class="cat1" href="#">Cat 1</a>
        <ul id="submenu1" class="SubmenuOFF">
            <li><a href="#">Menu 1.1</a></li>
            <li><a href="#">Menu 1.2</a></li>
            <li><a href="#">Menu 1.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('2')"><a id="menu2" class="cat2 currentmenu" href="#">Cat 2</a>
        <ul id="submenu2" class="SubmenuON current">
            <li><a href="#">Menu 2.1</a></li>
            <li><a href="#">Menu 2.2</a></li>
            <li><a href="#">Menu 2.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('3')"><a id="menu3" class="cat3" href="#">Cat 3</a>
        <ul id="submenu3" class="SubmenuOFF">
            <li><a href="#">Menu 3.1</a></li>
            <li><a href="#">Menu 3.2</a></li>
            <li><a href="#">Menu 3.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('4')"><a id="menu4" class="cat4" href="#">Cat 4</a>
        <ul id="submenu4" class="SubmenuOFF">
            <li><a href="#">Menu 4.1</a></li>
            <li><a href="#">Menu 4.2</a></li>
            <li><a href="#">Menu 4.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('5')"><a id="menu5" class="cat5" href="#">Cat 5</a>
        <ul id="submenu5" class="SubmenuOFF">
            <li><a href="#">Menu 5.1</a></li>
            <li><a href="#">Menu 5.2</a></li>
            <li><a href="#">Menu 5.3</a></li>
        </ul>
    </li>
    <li onmouseover="ShowSubMenu('6')"><a id="menu6" class="cat6" href="#">Cat 6</a>
        <ul id="submenu6" class="SubmenuOFF">
            <li><a href="#">Menu 6.1</a></li>
            <li><a href="#">Menu 6.2</a></li>
            <li><a href="#">Menu 6.3</a></li>
        </ul>
    </li>            
</ul>
 
</body>
</html>
Code 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
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
 
/* CSS Document */
 
* {
	margin:0;
	padding:0;
}
 
html {
	padding:40px;
}
 
#menu {
	position:relative;
	padding-left: 100px;
}
 
	#menu li {
		float: left;
		list-style: none;
		font: 12px Tahoma, Arial;
	}
 
	#menu li a {
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000;
		font-weight:bold;
		border-top:#333 solid 3px;
		padding:5px 10px 5px 10px;
		margin:0 5px;
		text-decoration:none;
		display: block;
		white-space: nowrap;
	}
 
	#menu li a.cat1		{ border-top-color:#7E0818; }
	#menu li a.cat2		{ border-top-color:#A62A82; }
	#menu li a.cat3		{ border-top-color:#E17F3E; }	
	#menu li a.cat4		{ border-top-color:#B8CD28; }
	#menu li a.cat5		{ border-top-color:#797979; }
	#menu li a.cat6		{ border-top-color:#292A25; }
 
 
	#menu li a:hover, a.menuHover {
	background-color:#F2F2F2;
	color:#333;
	}
 
	#menu li a.currentmenu, #menu li a.currentmenu:hover {
		background-color:#A62A82; /*dynamic color*/
		color:#FFF;
	}
		#menu li ul {
			margin: 0;
			padding: 0;
			position: absolute;
			left:0;
			background-color:#F2F2F2;
			width:100%;
		}
 
		#menu li ul li {
			float: left;
			display: inline;
		}
 
		#menu li ul li a {
			display:block;
			border-top:inherit;
			width: auto;
			color:#333;
			text-decoration:none;
			background-color:inherit;
			border-bottom-color:#F2F2F2;			
			border-bottom-style:solid;
			border-bottom-width:2px;
		}
 
		#submenu1 li a:hover { border-bottom-color:#7E0818; }
		#submenu2 li a:hover { border-bottom-color:#A62A82; }
		#submenu3 li a:hover { border-bottom-color:#E17F3E;	}
		#submenu4 li a:hover { border-bottom-color:#B8CD28;	}
		#submenu5 li a:hover { border-bottom-color:#797979;	}
		#submenu6 li a:hover { border-bottom-color:#292A25;	}
 
#menu li ul.current {
	background-color:#A62A82; /*dynamic color*/
}
#menu li ul.current a {
	color:#FFF;
	border-bottom-color:#A62A82; /*dynamic color*/
}
#menu li ul.current a:hover, #menu li ul.current a.currentsubmenu {
	border-bottom-color:#FFF;
	background-color:inherit;
}
 
.SubmenuOFF {
	display: none;
}
.SubmenuON {
	display: inline;
}
Code js :

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
 
// JavaScript Document
 
function ShowSubMenu(MyID) {
	//** Menu *************************************************************************
	var currentCAT = 2; //catégorie en cours
	var IDMenu = "menu" + MyID; //id menu survolé
	if (MyID != currentCAT) 
		document.getElementById(IDMenu).className = "cat" + MyID + " menuHover"; //attribution classe hover au menu survolé
	for (i=1; i<=6; i++) { //rétablissement des classes des autres menus
		var k = "menu" + i;
		if ( (i != MyID) && (i != currentCAT) )
			document.getElementById(k).className = "cat" + i;
	}	
	//** Submenu ***********************************************************************
	var IDSubmenu = "submenu" + MyID; //id bloc submenu survolé
	if (currentCAT != MyID)
		document.getElementById(IDSubmenu).className='SubmenuON'; //affichage du bloc
	else
		document.getElementById(IDSubmenu).className='SubmenuON current'; //affichage du bloc
	for (i=1; i<=6; i++) {
		var k = "submenu" + i;
		if (i != MyID)
			document.getElementById(k).className='SubmenuOFF';	//cacher les autres blocs submenu
	}
}
 
function RestoreMenu() {	
	var currentCAT = 2; //catégorie en cours
	//** Menu *************************************************************************	
	var IDMenu = "menu" + currentCAT; //id menu courant
		for (i=1; i<=6; i++) { //rétablissement des classes des autres menus
		var k = "menu" + i;
		if ( i != currentCAT )
			document.getElementById(k).className = "cat" + i;
	}	
	//** Submenu ***********************************************************************
	var IDSubmenu = "submenu" + currentCAT; //id bloc submenu courant
	document.getElementById(IDSubmenu).className='SubmenuON current'; //affichage du bloc submenu courant
	for (i=1; i<=6; i++) {
		var k = "submenu" + i;
		if (i != currentCAT)
			document.getElementById(k).className='SubmenuOFF';	//cacher les autres blocs submenu
	}	
 
}