Menu estica

Esse é o menu:

SHalala

SHalala

SHalala

Agora cole o codigo abaixo onde quiser que o menu apareça:

/* INICIO DO CODIGO*/

<style>

#itemfundo {

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

background-image: linear-gradient(right , rgb(148,0,25) 5%, rgb(87,0,12) 52%);

background-image: -o-linear-gradient(right , rgb(148,0,25) 5%, rgb(87,0,12) 52%);

background-image: -moz-linear-gradient(right , rgb(148,0,25) 5%, rgb(87,0,12) 52%);

background-image: -webkit-linear-gradient(right , rgb(148,0,25) 5%, rgb(87,0,12) 52%);

background-image: -ms-linear-gradient(right , rgb(148,0,25) 5%, rgb(87,0,12) 52%);



background-image: -webkit-gradient(

 linear,

 right top,

 left top,

 color-stop(0.05, rgb(148,0,25)),

 color-stop(0.52, rgb(87,0,12))

);

}



#itemfundo:hover {

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

background-image: linear-gradient(right , rgb(110,0,20) 5%, rgb(158,0,24) 52%);

background-image: -o-linear-gradient(right , rgb(110,0,20) 5%, rgb(158,0,24) 52%);

background-image: -moz-linear-gradient(right , rgb(110,0,20) 5%, rgb(158,0,24) 52%);

background-image: -webkit-linear-gradient(right , rgb(110,0,20) 5%, rgb(158,0,24) 52%);

background-image: -ms-linear-gradient(right , rgb(110,0,20) 5%, rgb(158,0,24) 52%);



background-image: -webkit-gradient(

 linear,

 right top,

 left top,

 color-stop(0.05, rgb(110,0,20)),

 color-stop(0.52, rgb(158,0,24))

);

}





#item {

color: #8B4513;

font-size: 16px;



margin-left: 0px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}



#item a:link{

color: #8B4513;

font-size: 16px;



margin-left: 0px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}



#item a:visited {

color: #8B4513;

font-size: 16px;



margin-left: 0px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}



#item a:hover{

color: rgb(247, 89, 89);

font-size: 16px;

text-shadow: rgb(117, 1, 1) 0px 2px 2px;

margin-left: 50px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}



#item a:active {

color: #8B4513;

font-size: 16px;



margin-left: 0px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}





#item:hover{

color: rgb(247, 89, 89);

font-size: 16px;

text-shadow: rgb(117, 1, 1) 0px 2px 2px;

margin-left: 50px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 0.5s ease-in;

}

</style>



<br />

<div id="item">

<div id="itemfundo">

<a href="http://www.blogger.com/LINK">SHalala</a></div>

</div>

<br />

<div id="item">

<div id="itemfundo">

<a href="http://www.blogger.com/LINK">SHalala</a></div>

</div>

<br />

<div id="item">

<div id="itemfundo">

<a href="http://www.blogger.com/LINK">SHalala</a></div>

<br /></div>

/* FIM DO CODIGO

CREDITOS, GUI design storm

*/