Bonjour,
Voici mon problème, j'ai fait un menu de navigation avec des table-cell.
Admettons que j'ai 4 elements dans mon menu (affichés en ligne) et qu'au survol d'un de ces éléments de menu cela fasse apparaître un sous menu lui étant associé dans une nouvelle table affiché en ligne juste en dessous du menu principal.
Le problème est que lorsque je sélectionne un élément du menu principal, les sous-menu associés apparaissent bien mais dès lors que je veux sélectionner un élément du sous menu en dessous, cela sélectionne automatiquement l'élément de menu adjacent et fait apparaitre le sous menu lui correspondant à la place. De plus les sous menu sont sélectionnable sans passer par le menu principal (depuis que j'ai positionné ce dernier avec un right: 0)
Voici le code associé pour comprender la situation, celle-ci étant difficile à expliquer par des mots
Et le CSS:
Le problème n'est pas difficile à reproduire il suffit de copier ce code rapidement et vous verrez tout de suite ce que cela fait, je me casse un peu la tête mais je ne trouve pas de solution, d'où ma requête !
Merci d'avance.
Voici mon problème, j'ai fait un menu de navigation avec des table-cell.
Admettons que j'ai 4 elements dans mon menu (affichés en ligne) et qu'au survol d'un de ces éléments de menu cela fasse apparaître un sous menu lui étant associé dans une nouvelle table affiché en ligne juste en dessous du menu principal.
Le problème est que lorsque je sélectionne un élément du menu principal, les sous-menu associés apparaissent bien mais dès lors que je veux sélectionner un élément du sous menu en dessous, cela sélectionne automatiquement l'élément de menu adjacent et fait apparaitre le sous menu lui correspondant à la place. De plus les sous menu sont sélectionnable sans passer par le menu principal (depuis que j'ai positionné ce dernier avec un right: 0)
Voici le code associé pour comprender la situation, celle-ci étant difficile à expliquer par des mots
<div id="wrapper">
<div id="header">
<div id="header_inside">
<a href="mon_lien" accesskey="1" title="mon_titre">
<img id="logo" alt="Accueil - Ordilogie"
src="mon_image_logo.png"
width="309" height="56" />
</a>
<ul id="nav">
<li><a href="#">Menu0</a></li>
<li><a href="#">Menu1</a>
<ul class="nav_sub">
<li><a href="#">Menu_item_1_1/a></li>
<li><a href="#">Menu_item_1_2</a></li>
<li><a href="#">Menu_item_1_3</a></li>
<li><a href="#">Menu_item_1_4</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul class="nav_sub">
<li><a href="#">Menu_item_2_1</a></li>
<li><a href="#">Menu_item_2_2</a></li>
</ul>
</li>
<li><a href="#">Menu_3</a></li>
</ul>
</div>
</div>
</div>
</body>Et le CSS:
/* ---------------------------- */
/* == Header */
/* ---------------------------- */
#header {
height: 150px;
background : url(../img/ordilogie_header_background.png) repeat-x;
/*border: 1px solid red;*/
}
#header_inside{
position: relative; /* Referent pour position le menu de navigation */
width: 960px;
margin: auto; /* centre le contenu du header et le decale vers le bas */
top: 52px;
/*border: 1px solid green;*/
}
#header_inside > a {
width: 309px;
padding-left: 20px;
/*border: 1px solid red;*/
}
#header_inside > a > img{
border: none;
}
#nav {
position: absolute;
display : table;
/*table-layout: auto;*/
height: 40px;
width: 50%;
bottom: -60px;
right: 100px;
margin: 0 0 0 380px; /* marge gauche de 380px car IE ne comprend pas le decalage 'right: 100px', mais interprete une marge sur un elt 'display: table' a la place, qui n'a aucune incidence sur les autres navigateurs */
padding: 0;
z-index:1; /* passe en foreground */
/*border:1px solid rgba(0,0,0,0.1);*/
}
.nav_sub {
position: absolute;
right: 0; /* probleme quand on met right = 0, des qu'on se met en hover sur un des li de nav_sub, le sous menu apparait bien mais des qu'on essaye de selectionner un des elements du sous menu, ca selectionne le li d'a cote
et ca fait apparaitre le sous menu qui lui est associe */
display: table;
z-index: 0;
opacity: 0;
/* filter:alpha(opacity=0);*/
}
.nav_sub > li {
display: table-cell;
width: 10%;
min-width: 10%;
overflow: hidden;
-webkit-transition: background-color 1.6s;
-moz-transition: background-color 1.6s;
-ms-transition: background-color 1.6s;
-o-transition: background-color 1.6s;
transition: background-color 1.6s;
transition-duration: 1.6s;
}
/* -- FIXME -- probleme avec les nav_sub qui s'affiche sans qu'on aille sur les elements de la liste adequats */
#nav > li:hover > .nav_sub{
z-index: 1;
opacity: 1;
}
.nav_sub > li:hover {
background: rgba(102,126,195,0.9);
}
.nav_sub > li:first-child, .nav_sub > li:first-child:hover, .nav_sub > li:first-child > a {
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
behavior: url(assets/style/css3pie/PIE.htc);
}
.nav_sub > li:last-child, .nav_sub > li:last-child:hover, .nav_sub > li:last-child > a {
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
behavior: url(assets/style/css3pie/PIE.htc);
}
#nav > li {
display: table-cell;
width: 10%;
min-width: 10%;
overflow: hidden;
-webkit-transition: width .4s;
-moz-transition: width .4s;
-ms-transition: width .4s;
-o-transition: width .4s;
transition-property: width;
transition-duration: .4s;
}
#nav li a {
display: block;
padding: 8px 12px;
color: #fff;
font-size: 1.3em;
text-shadow: 0px 0px 6px #777;
text-decoration: none;
white-space: nowrap;
background-color: rgba(61,72,103,0.6);/* rgba(102,126,195,0.8), #98B924; */
border: 2px solid #9599b7;/*a3a7c3*/
}
#nav > li:first-child, #nav > li:first-child:hover, #nav > li:first-child > a {
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
behavior: url(assets/style/css3pie/PIE.htc);
}
#nav > li:last-child, #nav > li:last-child:hover, #nav > li:last-child > a{
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
behavior: url(assets/style/css3pie/PIE.htc);
}
#nav li + li a {
border-left: 0;
}
#nav > li:hover {
width: 25%;
}
#nav > li:hover {
background: rgba(102,126,195,0.9);
}
Le problème n'est pas difficile à reproduire il suffit de copier ce code rapidement et vous verrez tout de suite ce que cela fait, je me casse un peu la tête mais je ne trouve pas de solution, d'où ma requête !
Merci d'avance.
