Bonjour !
Alors ce n'est pas organisé en liste tout simplement parce que c'est un tableau !
Voici le code de mon index ( le menu est généré à la volée par joomla, il est inséré dans le tableau )
Pillmenu cest mon menu principal qui comporte "Portes" etc, et pill_lol ( désolé du nom xD ) c'est ce qui comporte mon sous menu "Portes PVC" "Portes aluminium" etc... je sais je devrais etre plus rigoureux sur les noms.
<div id="menu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_m">
<div id="pillmenu"><jdoc:include type="modules" name="user3" />
<div id="trait_dessus"><hr></div>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="pill_lol">
<tr>
<td class="lol_m">
<div id="pillmenu_lol">
<jdoc:include type="modules" name="lol" />
</div>
</td>
</tr>
</table>
</div>
Et voici le code de mon CSS qui correspond à mon menu
#pillmenu li#current.active a:link {
[b] background: url(../images/mw_menu_normal_bg_save.png) repeat-x;[/b]
font-weight: bold;
}
#pillmenu li#current.active a:visited {
[b]background: url(../images/mw_menu_normal_bg_save.png) no-repeat;[/b]
color:#F90;
font-weight: bold;
}
table.pill {
margin-left: -60px;
margin-right: auto;
padding: 50px;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.pill_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0px;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu {
white-space: nowrap;
height: 0px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 15px;
color: #FFF;
text-decoration: none;
}
#pillmenu current.active {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
/* Affichage du sous menu */
table.pill_lol {
margin-left: 10px;
margin-right: auto;
padding: 0;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.lol_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu_lol {
white-space: nowrap;
height: 32px;
float: left;
}
#pillmenu_lol ul {
margin: -20px;
padding: 0;
list-style:none;
}
#pillmenu_lol li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu_lol a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #FFF;
text-decoration: none;
}
#pillmenu_lol li#current.active a:visited {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
color:#F90;
}
#pillmenu_lol a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
En gras dans le code CSS c'est mon image blanche que j'affiche quand me menu est sélectionné, et c'est cette image que j'aimerais continuer à afficher lorsque le sous menu est sélectionné
Merci beaucoup !
