Je vais essayer d etre le plus clair possible :
Je crée un menu avec une background image pour chaque item principale et une autre bg image pour le bloc d'item secondaires. Le problème c'est que le bloc des mes items secondaire a une image "fin de sous menu", donc je lui donne une position left bottom.
Ainsi si mon nombre d'item est faible il n'y a pas de probleme, les deux images sont "raccord". Par contre si je dépasse un certain nombre, il y a un vide entre les images car elle est accrochée en bottom.
Pour palier à ca j'ai rajouté une image background pour chaque item secondaire, en left center, avec un repeat-y. Ainsi le "vide" est comblé.
Probleme : l'image background de mes items est par dessus le bg de mon bloc item secondaire donc on ne voit que l'image des items et non la fin du bloc.
J'ai essayé de jouer avec les z-index mais rien n'y fait... Peut etre que ma technique n'est pas la bonne, sinon comment faire ?
Voici mon code :
html
Code : Tout sélectionner
<h2 onmouseover="show_submenu('sous_menu_1');">Titre1</h2>
<div id="sous_menu_1" class="sous_menu" style="display:none;">
<h5>Sous menu 1</h5>
<h5>Sous menu 2</h5>
<h5>Sous menu 3</h5>
</div>Code : Tout sélectionner
h2 {
margin-bottom:0px;
background-image:url("style/images/image_item1.jpg");
background-position:left top;
background-repeat:no-repeat;
padding-left:55px;
min-height:35px;
padding-top:5px;
}
.sous_menu {
background-image: url("style/images/bloc_bg_bas.jpg");
background-position:left bottom;
background-repeat:no-repeat;
margin-top:-5px;
z-index:100;
}
.sous_menu h5 {
background-image: url("style/images/item_bg.jpg");
background-position:left center;
background-repeat:repeat-y;
padding-left:70px;
margin-top:0px;
margin-bottom:0px;
z-index:10;
}