Menu déroulant dans article

Nous installons un menu déroulant à côté d'un cadre texte, qui va nous permettre d'illustrer les éléments du menu, qui va se dérouler au survol.
Dans ce menu, nous allons mettre en lien des images, des pages, des sites... toujours en dimensions adaptatives pour que n'importe quel écran puisse les lires confortablement.

Vous pouvez ainsi présenter une galerie de photos dans un espace limité en laissant de la place pour votre article.
Code du menu uniquement.

<div id="m0">
<p id="m1"><a href="http://pourquoipas732.eklablog.com/accueil-c21574769/2" target="blank"> Accueil</a><a></a></p>
<p id="m1"><a href="http://pourquoipas732.eklablog.com/video-youtube-en-adaptatif-p1233946" target="blank"> Vid adapt</a></p>
<p id="m1"><a href="http://ekladata.com/65KFzLAXjk-rzReLGbH89ovTtes.jpg" target="blank">En route</a></p>
<p id="m1"><a href="http://ekladata.com/SuedteqjA335IrdVzXmm8gnrTNY.jpg" target="blank">lien 4</a></p>
<p id="m1"><a href="http://ekladata.com/jU9AEfD0lT5fSQkXhy7xect-ke4.jpg" target="blank">lien 5</a></p>
<p id="m1"><a href="http://ekladata.com/e69UMrm_8uuv6526O93J383wLAo.jpg" target="blank">lien 6</a></p>
</div>
<style><!--
#m0{ position:absolute; z-index:5; width:8.2vw; height:5.2vh; overflow:hidden; margin:0 0 0 1vw; transition:all 1s linear;}
#m1{width:8vw; height:5vh; border:0.1vw solid black; text-align:center; font-size:2.5vh; line-height:5vh; background:lime; box-shadow:inset 0vw 0vh 0.4vw black; border-radius:2vw ;}
#m0:hover{height:38vh;}
--></style>