Bonjour,
je cherche à faire un menu déroulant sur 2 niveaux sans javascript. Dans un menu vertical, quand on passe sur un bouton au survol, se déroule en dessous le 1er menu, puis si sous menu il y a, au survol il apparait sur le côté (voir exemple à cette adresse : http://pilote.mydistribution.fr/barb...age%20test.htm[/url]).
Quand le 1er menu se déroule et devrait pousser le bouton en dessous. Mais ce n'est pas cas
Dans l'exemple le sous menu d'art de la table ne pousse pas vers le bas le menu vase...
je tourne et retourne mon CSS que je ne vois plus où est mon erreur. Le voici, est ce que quelqu'un peut m'ouvrir les yeux et m'aider ??
Merci par avance !
voici le code :
je cherche à faire un menu déroulant sur 2 niveaux sans javascript. Dans un menu vertical, quand on passe sur un bouton au survol, se déroule en dessous le 1er menu, puis si sous menu il y a, au survol il apparait sur le côté (voir exemple à cette adresse : http://pilote.mydistribution.fr/barb...age%20test.htm[/url]).
Quand le 1er menu se déroule et devrait pousser le bouton en dessous. Mais ce n'est pas cas
Dans l'exemple le sous menu d'art de la table ne pousse pas vers le bas le menu vase...
je tourne et retourne mon CSS que je ne vois plus où est mon erreur. Le voici, est ce que quelqu'un peut m'ouvrir les yeux et m'aider ??
Merci par avance !
voici le code :
#menu
{
float:left;
width:190px;
background:url(images/fond-menu-deroulant.jpg);
background-repeat:repeat-y;
background-position:left;
background-color:#FDB000;
padding-left:35px;
z-index:100;
}
#menu ul {list-style-type:none; padding:0; margin:0;
}
#menu li {
float:left;
background-color:#FDB000;
border-bottom:1px solid #fff;
}
#menu li.sub {
background-color:#FDB000;
border-bottom:1px solid #fff;
}
#menu li, #menu li a {
display:block;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
line-height:40px;
width:200px;
font-weight:normal;
text-decoration:none;
cursor:pointer;
text-align:left;
/*padding-left:10px;
*/height:40px;
text-indent:10px;}
#menu table {
border-collapse:collapse;
padding:0;
margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:200px;}
#menu :hover {
z-index:500;
white-space:nowrap;}
#menu :hover > a {
z-index:500;
white-space:nowrap;}
#menu :hover ul {position:static;/* height:180px; margin-top:-1px;*/ /*background:#383838;*/}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {
display:block;
position:absolute;
left:200px;
top:0;
height:auto;
z-index:500;
/* border:1px solid #fff;*/}
#menu :hover ul li, #menu :hover ul li a {
background:#FED77F;
text-align:left;
text-indent:10px;
height:30px;
line-height:30px;
border:none;}
#menu :hover ul li.fly a {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu :hover ul :hover {position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu :hover ul li.fly:hover > a {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu li ul li a{
font-size:14px;
color:#84339C;
background:#fed77f url(images/fond_sousmenu.jpg) right repeat-y;
border:none;
}
#menu li ul li ul li a, #menu :hover ul li.fly ul li a{
font-size:12px;
background-color:#FEEBBF;
background-image:none;
}
#menu :hover ul li.fly ul li a:hover {
font-weight:bold;
}
