Bonjour,
Je rencontre un problème avec un menu déroulant en CSS, qui fonctionne sur le principe des boutons qui se déplacent hors du champ de vision. Il fonctionne bien sous Chrome, mais sous Firefox les sous-menus disparaissent dès que le pointeur de la souris descend.
Suite à mes recherches, j'ai pris connaissances de problèmes liés au positionnement avec "top". Je n'ai pas ce type de positionnement dans le menu.
Dans la section "apprendre" je n'ai vu que des références au menu avec Jquery.
Pouvez-vous m'indiquer de quel côté se situe l'erreur, ou quel type de problématique est en jeu, afin que j'oriente mes recherches ?
Je me demande si c'est un problème de type "en ligne" vs "block", mais après divers essais je tourne en rond.
Merci beaucoup,
Voici pour les détails du problème:
Mon site : http://www.etiennechampollion.com
J'ai créé un menu déroulant sur mon site sous Wordpress, en m'inspirant de celui proposé ici : http://www.lyxia.org/blog/ressources/wordpress-ressources/wordpress-menu-deroulant-pages-et-categories-237
Cela a bien fonctionné un moment, puis j'ai fait des modifications, notamment j'ai passé la gestion des images de fond de #nav li li a à .page_item a , afin de les retrouver dans les plans des pages, et aussi de pouvoir différencier certains boutons (Emilie Marsh).
Je n'arrive pas à savoir si cela vient de là ou pas, mais j'ai un problème sur Firefox (Ubuntu) : dès que le pointeur de la souris quitte le menu, les sous-menus disparaissent.
Ce qui est encore plus curieux, c'est que parfois ça fonctionne brièvement, notamment si on garde le bouton de la souris enfoncé.
Voici le code php du menu :
et le CSS :
Modifié par Arnaud04 (25 Aug 2011 - 08:04)
Je rencontre un problème avec un menu déroulant en CSS, qui fonctionne sur le principe des boutons qui se déplacent hors du champ de vision. Il fonctionne bien sous Chrome, mais sous Firefox les sous-menus disparaissent dès que le pointeur de la souris descend.
Suite à mes recherches, j'ai pris connaissances de problèmes liés au positionnement avec "top". Je n'ai pas ce type de positionnement dans le menu.
Dans la section "apprendre" je n'ai vu que des références au menu avec Jquery.
Pouvez-vous m'indiquer de quel côté se situe l'erreur, ou quel type de problématique est en jeu, afin que j'oriente mes recherches ?
Je me demande si c'est un problème de type "en ligne" vs "block", mais après divers essais je tourne en rond.
Merci beaucoup,
Voici pour les détails du problème:
Mon site : http://www.etiennechampollion.com
J'ai créé un menu déroulant sur mon site sous Wordpress, en m'inspirant de celui proposé ici : http://www.lyxia.org/blog/ressources/wordpress-ressources/wordpress-menu-deroulant-pages-et-categories-237
Cela a bien fonctionné un moment, puis j'ai fait des modifications, notamment j'ai passé la gestion des images de fond de #nav li li a à .page_item a , afin de les retrouver dans les plans des pages, et aussi de pouvoir différencier certains boutons (Emilie Marsh).
Je n'arrive pas à savoir si cela vient de là ou pas, mais j'ai un problème sur Firefox (Ubuntu) : dès que le pointeur de la souris quitte le menu, les sous-menus disparaissent.
Ce qui est encore plus curieux, c'est que parfois ça fonctionne brièvement, notamment si on garde le bouton de la souris enfoncé.
Voici le code php du menu :
<ul id="nav" class="clearfloat">
<?php wp_list_pages('title_li=&depth=2&exclude=25'); ?>
<li class=icones>
<a href="http://www.facebook.com/etienne.champollion" target="_blank" title="Etienne Champollion sur Facebook" id="facebook"></a>
<a href="http://www.myspace.com/etiennechampollion" target="_blank" title="Etienne Champollion sur Myspace" id="myspace"></a>
<a href="http://www.youtube.com/user/EtienneChampollion" target="_blank" title="Etienne Champollion sur Youtube" id="youtube"></a>
<a href="http://www.free-scores.com/partitions_a_z.php?compositeur=etienne-champollion" target="_blank" title="Etienne Champollion sur Freescore" id="freescore"></a>
</li>
</ul>
et le CSS :
#nav{
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
z-index: 8;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float:left;
list-style:none;
border-right:0px none;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #fff;
padding:6px 6px 6px 24px;
background-repeat: no-repeat;
background-position: left ;
}
#nav a:hover {
color: yellow;
z-index: 9;
}
#nav .current_page_item a {
background-image: url(images/jouffrey_18_saute.png);
color: red;
}
#nav li ul {
position: absolute;
left:-999em;
height: 27px;
width: 160px;
border-bottom: 0px none;
}
#nav li li {
width: 160px;
border-top: 0px none;
border-right: 0px none;
border-left: 0px none;
background: #000;
background-image: url(images/fond_bandeau.png);
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
color: yellow;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
color: yellow;
}
a.main:hover
{
background:none;
}
.page_item a, page_item a:visited {
display:block;
font-weight:bold;
background-image: url(images/jouffrey_18_droit.png);
background-repeat: no-repeat;
color: yellow;
}
.page_item a:hover, page_item a:active {
display:block;
font-weight:bold;
background-image: url(images/jouffrey_18_saute.png);
background-repeat: no-repeat;
color: red;
}
.page-item-140 a, .page-item-140 a:visited {
display:block;
font-weight:bold;
background-image: url(images/logo_marsh_petit.png);
background-repeat: no-repeat;
}
.page-item-140 a:hover, .page-item-140 a:active {
background-image: url(images/logo_marsh_petit_hover.png);
}
#nav .icones {
float: top right;
position: relative;
display: block;
top: 3px;
height: 20px;
background-position: 0px 0px;
}
#nav #facebook {
display: block;
float: right;
position: relative;
top: 0px;
right: 0px;
padding: 0px 5px 0px 5px;
width: 20px;
height: 20px;
background:url("images/icone_facebook.png") 0 0 no-repeat;
background-position: 0px 0px;
}
#nav #facebook:hover,#nav #facebook:active{
background-position: 0px -20px;
}
#nav #facebook.icones li{
}
#nav #myspace {
display: block;
float: right;
position: relative;
top: 0px;
padding: 0px 5px 0px 5px;
width: 20px;
height: 20px;
background:url("images/icone_myspace.png") 0 0 no-repeat;
background-position: 0px 0px;
}
#nav #myspace:hover,#nav #myspace:active{
background-position: 0px -20px;
}
#nav #youtube {
display: block;
float: right;
position: relative;
top: 0px;
padding: 0px 5px 0px 5px;
width: 20px;
height: 20px;
background:url("images/icone_youtube.png") 0 0 no-repeat;
background-position: 0px 0px;
}
#nav #youtube:hover,#nav #youtube:active{
background-position: 0px -20px;
}
#nav #freescore {
display: block;
float: right;
position: relative;
top: 0px;
padding: 0px 5px 0px 5px;
width: 20px;
height: 20px;
background:url("images/icone_freescore.png") 0 0 no-repeat;
background-position: 0px 0px;
}
#nav #freescore:hover,#nav #freescore:active{
background-position: 0px -20px;
}
#content {
float: left;
margin: 10px;
width: 697px;
}
Modifié par Arnaud04 (25 Aug 2011 - 08:04)