Voici un tutoriel qui va vous permettre de faire un beau menu déroulant vertical tout en transparence entièrement en css.

Pour réaliser ce menu je suis parti de mon menu horizontal que vous trouverez ici.
Je ne vais pas détailler ce code, mais juste notifier les modifications apportées par rapport au tutoriel du menu déroulant horizontal.
Donc si vous voulez des précisions sur les codes, comme en savoir plus sur la notation RGBa ou sur les commentaires conditionnels ou bien encore comment faire appel aux fichiers css, je vous demanderais de bien vouloir consulter ce tutoriel.

Comme le menu horizontal, celui-ci est compatible avec tous les navigateurs et a été testé avec IE7, IE8, firefox, google chrome, safari, opéra.
Sauf pour IE6 et inférieur.

Voir ce menu dans votre navigateur

Voici la structure html qui est la même que pour le menu horizontal.
<ul id="menu">

<li>

<a href="#1">Menu 1</a>

<ul>

<li><a href="#2">sous menu </a></li>

<li><a href="#3">encore un sous menu !</a></li>

<li><a href="#4">bah ! allez un autre !</a></li>

</ul>

</li>

<li>

<a href="#5">Menu 2</a>

<ul>

<li><a href="#6">sous menu </a></li>

<li><a href="#7">et un autre</a></li>

<li><a href="#8">encore un</a></li>

<li><a href="#9">un autre</a></li>

<li><a href="#10">le même</a></li>

</ul>

</li>

<li>

<a href="#21">Menu 3</a>

<ul>

<li><a href="#11">et bin v'la un autre sous menu</a></li>

<li><a href="#12">et un autre</a></li>

<li><a href="#13">puis un autre</a></li>

<li><a href="#14">taratata</a></li>

<li><a href="#15">fait beau hein !</a></li>

<li><a href="#16">oui mais froid</a></li>

<li><a href="#17">jamais content celui-là</a></li>

<li><a href="#18">c'est sur</a></li>

<li><a href="#19">en même temps</a></li>

<li><a href="#20">c'est vrai</a></li>

</ul>

</li>

<li>

<a href="#22">Menu 4</a>

<ul>

<li><a href="#23">sous catégorie</a></li>

<li><a href="#24">ça change de sous menu</a></li>

<li><a href="#25">mettez-y ce qu'il vous plait</a></li>

<li><a href="#26">allez encore un</a></li>

<li><a href="#27">puis un autre</a></li>

<li><a href="#28">et puis un autre</a></li>

<li><a href="#29">c'est rudement joli hein !</a></li>

<li><a href="#30">moi ça me plait bien</a></li>

<li><a href="#31">pourrait etre mieux </a></li>

<li><a href="#32">oui mais c'est plus cher !</a></li>

</ul>

</li>

</ul>
Passons maintenant aux fichiers css

Tout d'abord le css général pour tous les navigateurs.

/*--------début du menu de premier niveau--------*/
body {
font: 11px verdana, sans-serif;
background:url("http://www.cireasy.com/images/fondmenuderoulant.png") no-repeat scroll center top #FFFFFF;;
margin: 0 ;
padding: 0;
}

#menu
{
width:600px;      /*je mets une largeur correspondant à mon image de fond pour le placer à gauche dans l'image */
height: auto;
list-style-type: none;
margin: 0 auto;    /*je mets un margin auto pour le centrer dans la page avec l'image*/
padding: 0;
border: 0;

}
#menu > li
{

width: 120px;
margin: 5px;
padding: 0;
border: 0;

}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}

#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
/*---------------fin du menu de premier niveau-------------*/

/*---------------début du menu déroulant-------------------*/

#menu .menuderoulant {
width:160px;    /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
display: none;
list-style-type: none;
margin: -23px 0 0 115px;   /*une marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
padding: 0;
border: 0;
position:absolute; /*pour eviter tout decalage*/
}
#menu .menuderoulant li
{
float: right;
margin:0 auto;
padding: 0;
border: 0;
width: 150px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);

}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}

#menu li:hover > .menuderoulant {
display: block;
}
/*----------fin du menu déroulant----------------*/
Ensuite le css pour IE uniquement.

Dans ce css nous utiliserons le filtre gradient pour IE dans un commentaire conditionnel.
Pour en savoir plus sur le filtre gradient et le commentaire conditionnel, veuillez consulter le tutoriel du menu horizontal.

#menu li a { 

      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
      zoom:1;       /* important pour ie7*/
    }  

	#menu li a:hover {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
	zoom: 1;            /* important pour ie7*/
    }

	 #menu .menuderoulant li a {
	 background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
       zoom: 1;            /* important pour ie7*/

    }  

	#menu .menuderoulant li a:hover {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
	zoom: 1;         /* important pour ie7*/

     }

	#menu .menuderoulant li a:visited {
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
	zoom: 1;          /* important pour ie7*/

      }

Il vous faut donc deux feuilles de styles, une pour les bons élèves et une pour IE.
Je vous met les deux feuilles de styles que vous pourrez visualiser dans votre navigateur pour plus de clarté :
CSS pour tous les navigateurs
CSS pour internet explorer seul.

Et pour ceux qui n'utilisent pas de fichiers CSS, rendez vous sur cette page de test du menu et afficher la source pour comprendre comment insérer les CSS. ;)

Enfin si vous voulez savoir comment faire appel aux fichiers css, rendez vous sur le tuto horizontal.
Vous pouvez aussi visualiser la source de cette page pour plus d'information : page de test

Voila c'est fini, si vous avez aimé ce tutoriel, n'hésitez pas à me laisser un commentaire, ça fait toujours plaisir ! ;)