Menu 4

En changeant de style, nous pouvons imaginer un menu latéral.

J'ai placé 2 modules menu dans cet exemple, avec 6 liens dans chacun, avec une décoration contestable (!) mais vous pouvez modifier comme bon vous semble car le code est simple.

<div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/9QRtHaLSGAwyGbV7-0ji4-eB_yg.jpg'); background-size: cover; overflow: hidden;">
<div id="tt1">
<p class="ele">Menu 1</p>
<p class="ele"><a href="#">Lien 1</a></p>
<p class="ele"><a href="#">Lien 2</a></p>
<p class="ele"><a href="#">Lien 3</a></p>
<p class="ele"><a href="#">Lien 4</a></p>
<p class="ele"><a href="#">Lien 5</a></p>
<p class="ele"><a href="#">Lien 6</a></p>
</div>
<div id="tt2">
<p class="ele">Menu 2</p>
<p class="ele"><a href="#">Lien 7</a></p>
<p class="ele"><a href="#">Lien 8</a></p>
<p class="ele"><a href="#">Lien 9</a></p>
<p class="ele"><a href="#">Lien 10</a></p>
<p class="ele"><a href="#">Lien 11</a></p>
<p class="ele"><a href="#">Lien 12</a></p>
</div>
</div>

<style><!--
#tt1{position:absolute; z-index:1; width:71vw; height:3vw; transform:translate(50vw,2vw); transition:all 1s linear;}
#tt2{position:absolute; z-index:1; width:71vw; height:3vw; transform:translate(50vw,12vw); transition:all 1s linear;}
.ele{box-sizing:border-box; width:10vw; height:3vw; float:left; box-shadow:inset 0vw 0vw 1vw black; border-radius:3vh; border:0.1vh solid black; background:linear-gradient(to bottom, lime 0%, yellow 100%) ; text-align:center; font-size:2vw; line-height:3vw; text-shadow:0.1vh 0.1vh black;}
#tt1:hover{transform:translate(-10.5vw,2vw);}
#tt2:hover{transform:translate(-10.5vw,12vw);}
--></style>