Bonjour,
Je n'ai pas pour habitude de demander de l'aide, mais la sa fait un moment que je galère sur un bug seulement sur Google Chrome (étonnant que cela ne soit pas sur IE
)
j'ai un soucis de mise en page sur menu coulissant, je vais commencer par vous exposer le code. J'ai essayer de réduire au max les fichiers pour ne pas inonder le sujet.
Le code html :
Le code css
Je vais tenter d'exposer mon problème parce qu'il est un peu difficile à expliquer, il faut essayer le lien que je vous fournie plus bas pour voir le comportement.
Mon problème étant que les sous menu apparaissant au survol des liens "Product" et "Contact" n'on pas la bonne dimension en hauteur et pareil pour les sous menu des sous menu, etc ...
Quand vous survolez une première fois "Product" et/ou "Contact" les sous menu apparaisse correctement, mais si on les survols une deuxième fois, les sous menu n'ont pas la bonne hauteur, sauf quand ils arrivent à la fin de l'animation. Et bien sur même problème sur sous sous menu.
Petite info : j'ai remarqué que si je supprime la ligne "transition:all .5s linear .1s;" dans le fichier css dans la section "#menubar #menu ul ul a" le problème n’apparaît plus.
Je vous rappelle que le problème apparaît seulement dans Google Chrome.
Exemple du problème : http://w.at.t.free.fr/demo/
Je n'ai pas pour habitude de demander de l'aide, mais la sa fait un moment que je galère sur un bug seulement sur Google Chrome (étonnant que cela ne soit pas sur IE
)j'ai un soucis de mise en page sur menu coulissant, je vais commencer par vous exposer le code. J'ai essayer de réduire au max les fichiers pour ne pas inonder le sujet.
Le code html :
<!doctype html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="menubar">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li class="has-sub"><a href="#">Products</a>
<ul>
<li class="has-sub"><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Product 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub"><a href="#">Contact</a>
<ul>
<li class="has-sub"><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Product 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</body>
</html>
Le code css
body {
margin:0;
padding:0;
}
#menubar {
position:fixed;
z-index:999;
width:100%;
line-height:40px;
background:#000000;
}
#menubar div, ul, li {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
#menubar a {
list-style:none;
text-decoration:none;
}
#menubar #menu > ul > li {
display:inline-table;
}
/* Level 1 Links */
#menubar #menu > ul > li > a {
color:#A0A0A0;
line-height:40px;
padding:15px 10px 15px 25px;
transition:all .3s linear .1s;
}
/* Level 1 Links Hover */
#menubar #menu > ul > li:hover > a, #menubar #menu > ul > li.active > a {
color:#FFFFFF;
text-shadow:0px 0px 5px rgba(255, 255, 255, 0.4);
}
/* Level 2+ */
#menubar #menu ul li {
position:relative;
}
/* Level 2+ Container */
#menubar #menu ul ul {
opacity:0;
visibility:hidden;
padding:10px 0 10px 0;
background:#000000;
position:absolute;
width:180px;
transition:all .5s linear .1s;
}
/* Level 2 Container */
#menubar #menu > ul > li > ul {
top:45px;
left:-150px;
}
/* Level 2 Container Hover */
#menubar #menu > ul > li:hover > ul {
opacity:0.8;
visibility:visible;
left:0;
}
/* Level 2+ Links */
#menubar #menu ul ul a {
color:#323232;
display:block;
line-height:20px;
transition:all .5s linear .1s;
}
/* Level 2+ Links Hover */
#menubar #menu ul ul li:hover > a {
background:#f0f0f0;
}
/* Level 3+ Container */
#menubar #menu ul ul ul {
top:-10px;
left:335px;
}
/* Level 3+ Container Hover */
#menubar #menu ul ul li:hover ul {
opacity:0.8;
visibility:visible;
left:185px;
}
Je vais tenter d'exposer mon problème parce qu'il est un peu difficile à expliquer, il faut essayer le lien que je vous fournie plus bas pour voir le comportement.
Mon problème étant que les sous menu apparaissant au survol des liens "Product" et "Contact" n'on pas la bonne dimension en hauteur et pareil pour les sous menu des sous menu, etc ...
Quand vous survolez une première fois "Product" et/ou "Contact" les sous menu apparaisse correctement, mais si on les survols une deuxième fois, les sous menu n'ont pas la bonne hauteur, sauf quand ils arrivent à la fin de l'animation. Et bien sur même problème sur sous sous menu.
Petite info : j'ai remarqué que si je supprime la ligne "transition:all .5s linear .1s;" dans le fichier css dans la section "#menubar #menu ul ul a" le problème n’apparaît plus.
Je vous rappelle que le problème apparaît seulement dans Google Chrome.
Exemple du problème : http://w.at.t.free.fr/demo/
, dommage j'aimais bien l'effet de coulissage des sous menu.