Menu oculto en horizontal

[macaluan]

Buenas tardes,
tengo unos botones de redes sociales puestos en horizontal tal que así:

Código HTML:

<div class="footer-social-links">
    <a href="javascript:window.open('http://www.facebook.com/share.php?u=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-facebook"></i></a>
    <a href="javascript:window.open('https://twitter.com/?status=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-twitter"></i></a>
    <a href="javascript:window.open('http://www.linkedin.com/shareArticle?url==','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-linkedin"></i></a>
    <a href="javascript:window.open('https://plus.google.com/share?url=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-google-plus"></i></a>
    <a href="javascript:window.open('http://pinterest.com/pin/create/button/?media=','','width=600,height=400,left=50,top=50,toolbar=yes');void 0"><i class="fa fa-pinterest"></i></a>
</div>
 

Ahora lo que quiero hacer es ocultarlos en otro botón como el de abajo y que salgan en horizontal con retardo uno tras otro al hacer hover. No se si me explico. Imagino que es algo sencillo pero llevo atascado toda la tarde

Código HTML:

<div id="header">
    <nav>
        <ul class="nav">
            <li><a href="">SHARE</a>
            </li>
        </ul>
    </nav>
</div>