Un menu déroulant en CSS et sans javascript avec des images

Toujours en rapport avec les menus déroulants en css sans javascript, voici comment leur insérer des images pour faire des boutons presonnalisés.
Tout d'abord, rappel sur les trois articles :
                   - Un menu déroulant horizontal (html CSS) sans javascript
                   - Un menu déroulant vertical (html CSS) sans javascript
                   - Positionnement dans la page d'un menu déroulant en css et html>


Voici comment insérer des images pour personnaliser vos boutons, l'exemple ici s'illustre sur le menu vertical, mais c'est le même principe sur le menu horinzontal.
Voici un exemple :

• Catégorie1
  • Lien 1
  • Lien 2
  • Lien 3
• 
  
  
  
  
  
  

Il suffit de modifier la dernière partie du code (le css).
Voir en dessous du code les explications.

<style type="text/css"><!--
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 100px; margin: 0; padding: 0; border: 0; font-size:12px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/1.jpg); margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/4.jpg); }
#menuDeroulant1 li a:active { background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg); }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/2.jpg);}
#menuDeroulant1 .sousMenu1 li a:hover{ background: transparent url(http://idata.over-blog.com/1/46/60/50/boutons-menu/3.jpg);}
--></style>





Il y a 4 images :



1 : Image présente dans l'exemple pour le bouton de la catégorie non-activée par la souris.



2 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, non-activé par la souris.



3 : Image présente dans l'exemple pour le bouton de lien dans le sous-menu de la catégorie, activé par la souris.



4 : Image présente dans l'exemple pour le bouton de la catégorie activée par la souris.



Il suffit maintenant de modifier les URL en orange par les images de votre choix.