Sous Menu dans Menu avec Image ?

[Mike113]

Bonjour,

J'aimerais ajouter des sous menu dans un menu qui est fait avec une seul image.. Je vous montre mon menu actuel, vous comprendrez mieux je pense

Style.css

/* Menu */
#menu { width: 990px; height: 35px; position: relative; background: transparent url("images/menu.png"); margin: 0; padding: 0; list-style-type:none; }
#menu { float: left; }	
#menu il a { position: absolute; top: 0; margin: 0; padding: 0; display: block; height: 35px; background: transparent url("images/menu.png"); text-indent: -9999px; overflow: hidden; }

/* Menu 01 */
li#menu_01 a { left: 20px; width: 111px; background-position: -20px 0; }
li#menu_01 a:hover { background-position: -20px -35px; }

/* Menu 02 */
li#menu_02 a { left: 131px; width: 53px; background-position: -131px 0; }
li#menu_02 a:hover { background-position: -131px -35px; }

/* Menu 03 */
li#menu_03 a { left: 184px; width: 151px; background-position: -184px 0; }
li#menu_03 a:hover { background-position: -184px -35px; }

/* Menu 04 */
li#menu_04 a { left: 335px; width: 104px; background-position: -335px 0; }
li#menu_04 a:hover { background-position: -335px -35px; }

/* Menu 05 */
li#menu_05 a { left: 439px; width: 97px; background-position: -439px 0; }
li#menu_05 a:hover { background-position: -439px -35px; }

/* Menu 06 */
li#menu_06 a { left: 536px; width: 169px; background-position: -536px 0; }
li#menu_06 a:hover { background-position: -536px -35px; }

/* Menu 07 */
li#menu_07 a { left: 705px; width: 141px; background-position: -705px 0; }
li#menu_07 a:hover { background-position: -705px -35px; }

/* Menu 08 */
li#menu_08 a { left: 846px; width: 119px; background-position: -846px 0; }
li#menu_08 a:hover { background-position: -846px -35px; }

Le code dans la page

<ul id="menu">
<li id="menu_01"><a href="">Menu 01</a></li>
<li id="menu_02"><a href="">Menu 02</a></li>
<li id="menu_03"><a href="">Menu 03</a></li>
<li id="menu_04"><a href="">Menu 04</a></li>
<li id="menu_05"><a href="">Menu 05</a></li>
<li id="menu_06"><a href="">Menu 06</a></li>
<li id="menu_07"><a href="">Menu 07</a></li>
<li id="menu_08"><a href="">Menu 08</a></li>
</ul>

La c'est le menu simple et j'aimerais le faire évoluer en ajoutant des sous menu, donc je viens vers vous pour savoir si vous avez une solution ?

Merci d'avance

Modifié 29 Mai 2010 par Mike113

[baulet]

bonjour,

on comprendra mieux si tu nous donne un lien

[Mike113]

Le menu

Dans le site

et le code je l'ai donner dans mon premier message

[captain_torche]

J'imagine que tu vas devoir faire une extension de l'image avec les textes des sous-menu, puis tu utiliseras de la même manière la technique des sprites CSS.

A quel endroit bloques-tu, précisément ?

[Mike113]

Je ne sais tout simplement pas comment faire pour le sous menu... je suis a la recherche d'exemple pour mieux comprendre. Par contre cela peut simplement être un sous menu simple, avec du texte et un fond de la même couleur que le menu.

Le menu que je vous montre a été fait ya déjà un moment grâce a un tutoriel qui explique comment faire un menu comme sur le site d'apple (avec une seul image)