bonjour à tous,

Je suis en train de faire un menu deroulant, dans le genre du top menu de Devloppez mais verticalement.

Mon probleme c'est la jointure entre les themes, les display block semble ne pas prendre en compte les bordures du coup impossible de passer d'un choix à l'autre.

le menu :
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
 
<div id='MenuPos' >
<ul id="menu">
 
        <li>
               <a href="#" > Grilles </a>
               <ul>
                    <li>
	               	<a href="#" onclick="clickEvenement(1001); return false;"> Ens </a>
	        		Grille </a>
	        		</li>
	        		<li>
	        		<a href="#" onclick="clickEvenement(1002); return false;"> Liste </a>
 
        			</li>
               </ul>
        </li>
</ul></div>
le 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
#MenuPos{
	float :left;
	height:100%;
	width: 115px;
	background-color: #f4f7f9;
	border-right-color: #90a9b2;
	border-right-width: thin;
	border-right-style: solid;
	overflow: auto;
	font-weight:bold;
}
/* Liste */  
#menu, #menu ul    
{
	float:left;
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défaut de la liste */
	line-height : 21px; /* on définit une hauteur pour chaque élément */
	text-align : left; /* on met à gauche le texte qui se trouve dans la liste */
	width:115px;
}
 
#menu li
{
	float:left;
	width : 115px;
	margin-bottom: -1px;
	display : block;
}
 
/* Éléments de sous-listes */
#menu li ul li 
{
	float:left;
	margin-bottom : -1px;
	width:252px;
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
	display : block;
	margin-top : 0px;
	border : 1px solid #90a9b2; 
}
 
 
/* Contenu des listes */
#menu li a 
{
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding : 0; /* aucune marge intérieure */
	background : #f4f7f9; /* couleur de fond */        
	color : #7d96a2; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width : 113px; /* largeur */
	border: 1px white thin solid;
	border-right: #90a9b2 thin solid;
 
}
 
 
#menu>body li ul li a
{
	width: 250px; /* Largeur des sous-listes */
	border : 1px solid #90a9b2; 
}
#menu li ul li a
{
	width: 250px; /* Largeur des sous-listes */
	border : 1px solid #90a9b2; 
}
 
/* Sous-listes */
#menu li ul 
{ 
	position: absolute; /* Position absolue */
	display : block;
	left : -999em; /* Hop, on envoie loin du champ de vision */
	margin : -15px 0 0 80px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas completement au dessus des sous-listes */ 
}
 
/* IE ne reconnaissant pas le sélecteur ">"  */
html>body #menu li ul ul                
{
	display : block;
}
 
/* Sous-sous-listes lorsque la souris passe sur un élément de liste */
#menu li:hover ul ul, #menu li.sfhover ul ul 
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
 /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug sous IE */
}
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
je pensais avoir fait attention à tout mais non.... donc ne sachant plus ou chercher je viens vers toi communeauté dvpienne!
Aide-moi je t'en prie.