Οριζόντιο μενού για Blogger (Με περιγραφή για κάθε σύνδεσμο και κινούμενα σχέδια).

<style>
/* foulscode.blogspot.gr */
#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}
#menu-soft ul {
width:940px;
margin:0auto;
}

#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}
#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}
#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}
#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}
#menu-soft li span {
font-size:24px;
}
</style>
<div id="menu-soft">
<ul>
<li id="enlace-1"><a href="URL"><span>Τίτλος 1</span><br>περιγραφή 1</br></a></li>
<li id="enlace-2"><a href="URL"><span>Τίτλος 1</span><br>περιγραφή 1</br></a></li>
<li id="enlace-3"><a href="URL"><span>Τίτλος 1</span><br>περιγραφή 1</br></a></li>
<li id="enlace-4"><a href="URL"><span>Τίτλος 1</span><br>περιγραφή 1</br></a></li>
</ul>
</div>

DEMO


Και αφού αλλάξετε τα μαρκαρισμένα γράμματα με τα δικά σας είστε έτοιμη να κάνετε αποθήκευση!