Menu déroulant bordure pas prise en compte [Résolu]

[coshibe]

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 :

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 :

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 :

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.

[NoSmoking]

Bonsoir,
pas regardé en détail, je te conseilles de t'inspirer de http://css.developpez.com/tutoriels/...enu01test.html

[coshibe]

ma version est certes un peu plus brouillon que celle dans le tutoriel mis en lien, mais c'est le meme esprit.

ce qui change :
-c'est que je fais mon menu verticalement
-je n'arrive pas à passer d'un choix de sous menu à un autre, en effet en passant sur les bordures qui les séparent le sous menu disparait
-les bordures des menus ne sont pas transparentes(mais ca c'est voulu^^)

Donc je pense qu'il s'agit d'un probleme de display. Mais je ne vois pas ce que je n'ai pas pris en compte...

[coshibe]

Le probleme venait du survol de certaines zones. Je ne sais pas pourquoi mais apparement c'est ca qui faisait tout bugger, donc un petit decallage vers le bas et ca marche.