Menu coulissant

Je viens de publier la page: "votre page d'accueil 2" et le principe du menu déroulant étant noyé dans le code général, je le reprends ici, pour le principe.

Je place ce montage dans un cadre de 310x280px car, en se déroulant, il passe au dessus du reste de l'article, ce qui peut-être un avantage comme un inconvénient.

On trouve, sur le net, de nombreux codes pour ce type de montage mais parfois d'aspect compliqué; pour celui-ci, juste un cadre (vert1) qui s'agrandit au survol et laisse apparaître les rubriques cachées, avec les liens.
La partie visible est présentée sous forme d'un bouton (id="ml1"), à modifier selon vos goûts.
Les adresses de liens sont à écrire à la place des # et s'ouvriront dans une nouvelle page, au clic sur le lien
On peut transformer l'agrandissement vertical en agrandissement horizontal.

Code:
<div id="vert1">
<p id="ml1"><span style="font-size: 14pt;">Menu1</span><br /><br /><a href="#" target="blank;">Lien 1</a><br /><a href="#" target="blank;">lien 2</a><br /><a href="#" target="blank;">Lien 3</a><br />...</p>
</div>
</div>
<style><!--
#vert1 { position:absolute; width:200px; height:30px; background: linear-gradient(to top, #fefcea 0%,#f1da36 100%); transform:translate(50px,20px); overflow:hidden; transition:1s; border-radius:20px;}
#ml1{transition:all 0.5s linear; position:absolute; width:200px; height:30px; font-size:12pt; background: linear-gradient(to top, #cedce7 0%,#596a72 100%); transform:translate(0px,0px); text-align:center; }
#vert1:hover { height:200px; z-index:5;}
--></style>
...