Tut 1

Copy and paste the following between <style> and </style>
---------------------------------------------------------

#link{
    display:inline-block;
    width:120px;
    height:15px;
    overflow:hidden;
    margin:0 5px 0 5px;
    padding:5px;
    text-align:center;
    font-family:helvetica;
    font-size:13px;
    letter-spacing:2px;
    background:#B9ED6B; /*main 'link' color*/
    color:#ffffff; /*main 'link' text color*/
    z-index:99999999999999999;
}

#link #link-content{
    position:absolute;
    height:0px;
    overflow:hidden;
    margin-top:6px;
    margin-left:-5px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

#link:hover #link-content{
    height:100px; /*if you add more links you'll need to make this number larger*/
}

#link-content a{
    display:block;
    width:126px;
    padding:2px;
    text-align:center;
    background:#ffffff;  /*link color*/
    color:#B9ED6B; /*link text*/
    border-bottom:1px solid #B9ED6B; /*link bottom border color*/
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

#link-content a:hover{
    background:#B9ED6B; /*link hover color*/
    color:#ffffff; /*link hover text*/
}


Now copy and paste the following where you want your links to be. You'll need to find where the custom links in your theme go (they should be between <body> and </body>) There you will delete the "<a href=" custom link url"> custom link name </a>" and replace it with this code.

-You can use this to replace more than one link, just change the names of the 'main' link and actual links!

-------------------------------------------------------------------------------------------------------------------------------

<div id="link">
    Link 1 <!-- name of 'main' link -->
    <div id="link-content">
        <a href="URL">one</a>
        <a href="URL">two</a>
        <a href="URL">three</a>
        <a href="URL">four</a>
    </div>
</div>