Tutorial menu Scroll: 

Exemplo aqui 

Primeiro você vai precisar de uma imagem igual essa.

Depois de fazer uma imagem como esta , cole esse código entre <style> e <style>

#nav a.home{padding-left: 15px;float:left;display:block;background: url(LINK DA IMAGEM HOME) no-repeat;width: 160px;height: 29px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

#nav a.home:hover {background-position: -0px -29px;}


#nav a.about{padding-left: 15px;float:left;display:block;background: url(LINK DA IMAGEM ABOUT) 0px 0px no-repeat;width: 75px; height: 29px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

#nav a.about:hover {background-position: 0px -29px;}


#nav a.tumblr{padding-left: 15px;float:left;display:block;background: url(LINK DA IMAGEM TUMBLR) 0px 0px no-repeat;width: 160px; height: 29px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#nav a.tumblr:hover {background-position: 0px -29px;}


#nav a.ask{padding-left: 15px;float:left;display:block;background: url(LINK DA IMAGEM ASK) 0px 0px no-repeat;width: 160px;height: 29px; -webkit-transition: background 0.2s linear;  -webkit-transition: all 0.2s ease-out;  -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

#nav a.ask:hover {background-position: 0px -29px;}

Cada div você coloca a imagem do menu.

Agora cole esse código onde você quer que apareça:

<div style="position: absolute; left:130px; top: 260px; margin-top: 10px; margin-bottom: 55px;" >
<div id="nav">
<center>
<br>

<a href="/" class="home"></a>


<a class="about" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('liuc').innerHTML=document.getElementById('about').innerHTML"></span></a>



<a class="tumblr" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('liuc').innerHTML=document.getElementById('tumblr').innerHTML"></span></a>



<a class="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('liuc').innerHTML=document.getElementById('ask').innerHTML"></span></a>
<br><br>
</center>

    </div></div>

Tutorial por Gabriela

Código por D4Y.

Recoloque as aspas e se for util dê like