LE MENU DEROULANT VERTICAL.

Dans la famille des menus déroulants, voici le dernier, après le principe puis le menu déroulant horizontal.

CODE HTML EN BLEU

CODE CSS EN MARRON, ENTRE LES BALISES <style></style>

<ul id="menu-accordeon"><style>

#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}</style

<li><a href="#">PECHE</a>
		<ul>
			<li><a href="http://www.pecheurdumorin.fr/2016/05/amorce-a-gardons-mise-au-point-definitive.html">amorce à gardons</a></li>
			<li><a href="http://www.pecheurdumorin.fr/2016/04/brochet-sandre-black-bass-pecheurs-attention-la-reglementation-a-change.html">Règlementation</a></li>
			<li><a href="http://www.pecheurdumorin.fr/2016/04/federation-de-peche-de-seine-et-marne-voici-la-composition-de-la-nouvelle-equipe-dirigeante.html">Fédération de pêche 77</a></li>
			
		</ul>
	</li><!--
 --><li><a href="#">NATURE</a>
		<ul>
			<li><a href="http://www.naturepourvous.fr/2016/05/les-yeux-de-la-nuit.html">Les yeux de la nuit</a></li>
			<li><a href="http://www.naturepourvous.fr/2016/04/la-canard-mandarin.html">Le canard mandarin</a></li>
			<li><a href="http://www.naturepourvous.fr/2016/04/chevreuil-de-nuit.html">Chevreuil de nuit</a></li>
			
		</ul>
	</li>
</ul>

RESULTAT

• PECHE
  • amorce à gardons
  • Règlementation
  • Fédération de pêche 77
• NATURE
  • Les yeux de la nuit
  • Le canard mandarin
  • Chevreuil de nuit