A small CSS-only dropdown menu made with the popular checkbox hack.

index.html

<div class="dropdown-menu ddm1">	
	<input type="checkbox" name="toggle" id="toggle">
	<label for="toggle">Menu</label>
	<ul>
		<li><a href="#" title="Do something">Do something</a></li>
		<li><a href="#" title="Do something else">Do something else</a></li>
		<li><a href="#" title="Options">Options</a></li>
	</ul>
</div>

style.css

/* Comment réaliser un menu déroulant uniquement en CSS */

* {
	/* On retire toutes les marges pour faciliter la mise en page */
	padding:0;
	margin:0;
}

.dropdown-menu {
	/* On positionne le conteneur au centre et on lui assigne un placement
	relatif pour pouvoir placer ses enfants en absolu */
	position:relative;
	width:200px;
	margin:20px auto;
	
	font-family:'Helvetica', Arial, sans-serif; /* On change la police */
}

.dropdown-menu label {
	
	/* On définit une couleur de fond, de trait et de contour pour le bouton */
	background:#1e83e5;
	color:#fff; /* Fallback pour les navigateurs ne comprenant pas le rgba */
	color:rgba(0,0,0,0.6);
	border:1px solid #fff; /* Fallback pour les navigateurs ne comprenant pas le rgba */
	border:1px solid rgba(0,0,0,0.4);
	
	/* On termine de déclarer les styles typographiques */
	font-weight:bold;
	text-shadow:0 1px 1px rgba(255,255,255,0.2);
	
	/* On position l'élément et on spécifie ses marges */
	display:block;
	float:left;
	position:relative; 
	padding:5px 35px 5px 25px;

	/* On ajoute quelques styles user-friendly */
	cursor:pointer; /* Indique que le bouton est cliquable */
	border-radius:0.3em; /* Valeur passe-partout pour les bords arrondis */
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), /* Reflet en haut du bouton */
				inset 0 10px 30px rgba(255,255,255,0.3), /* Evite un applat de couleur */
				0 0 0 3px rgba(100,100,100,0.1), /* Renfoncement du bouton dans la matière */
				2px 2px 3px rgba(0,0,0,0.1); /* Ombre portée */
	transition:all 0.3s ease-out;
}

/* On met en place le triangle indiquant qu'il s'agit d'un menu déroulant 
par le biais d'un pseudo-élément afin de ne pas utiliser d'image
Dans le cas d'un vieux navigateur, l'icone n'apparaitra pas : tant pis */
.dropdown-menu label:after {
	 content: ""; /* Pas de contenu : élément visuel */
	 
	 /* On place l'élément */
	 position: absolute; 
	 top: 50%;
	 right: 10px;
	 
	 /* Ci-dessous la méthode pour avoir un triangle en CSS */
	 width: 0;
	 height: 0;
	 border-left: 6px solid transparent;
	 border-top: 6px solid rgba(0,0,0,0.6);
	 border-right: 6px solid transparent;
	 margin-left: -3px;
	 margin-top: -3px;
}

/* On met en place un état survolé au menu */
.dropdown-menu label:hover {
	background:#4caffa;
}

/* Afin de gérer un élément "onclick" qui perdure en CSS,
on utilise une méthode impliquant une checkbox et le pseudo-selector :checked */
.dropdown-menu input[type="checkbox"] {
	
	/* On position la checkbox hors écran, le label servira de déclencheur */
	position:absolute;
	clip:rect(0,0,0,0); /* Permet de réduire sa zone d'affichage à 0 */
	top:9999px;
}

/* On met en place la liste du menu */
.dropdown-menu ul {

	/* On place le menu */
	position:absolute;
	top:42px;
	
	/* On paramètre ses styles */
	list-style-type:none;
	padding:5px 0;
	font-size:13px;
	border:1px solid #ddd; 
	border-radius:0.3em;
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	
	/* Et on le cache pour finir */
	display:none;
}

/* On met en place une petite flèche au menu pour indique qu'il descend du bouton */
.dropdown-menu ul:after,
.dropdown-menu ul:before {
	content:"";
	height:0;
	width:0;
	position:absolute;
	bottom:100%;
	border:solid transparent;
}

.dropdown-menu ul:after {
	border-bottom-color:#fff;
	border-width:6px;
	left:15%;
	margin-left:-6px;
}

.dropdown-menu ul:before {
	border-bottom-color:#ddd;
	border-width:7px;
	left:15%;
	margin-left:-7px;
}

/* On style les liens du menu */
.dropdown-menu a {
	text-decoration:none;
	color:#333;
	display:block;
	padding:5px 15px;
} 

/* On paramètre le dernier élément du menu afin qu'il ait une bordure supérieure
pour le différencier des autres sans pour autant gérer une classe supplémentaire
à l'aide du pseudo-selecteur :last-of-type */
.dropdown-menu li:last-of-type {
	margin-top:4px;
	border-top:1px solid silver;
	border-top:1px solid rgba(0,0,0,0.2);
} 

/* On paramètre un survol aux éléments du menu */
.dropdown-menu a:hover {
	background:#0088CC;
	color:#fff;
} 

/* On déclare que si la checkbox est cochée, la liste est affichée */
.dropdown-menu input[type="checkbox"]:checked ~ ul {
	display:block;
}

/* On met en place quelques styles au bouton si le menu est affiché */
.dropdown-menu input[type="checkbox"]:checked ~ label {
	left:1px; /* Décale le bouton de 1px vers la droite */
	top:1px; /* Décale le bouton de 1px vers le bas */
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),
				inset 0 10px 30px rgba(255,255,255,0.3),
				0 0 0 3px rgba(100,100,100,0.05);
	background:#4caffa;
}