如何使动画div菜单从按钮下方消失？

Question

我的项目在图像徽标下方有一个按钮。我有一个动画菜单div，当我点击该按钮时它会降下来，但问题是菜单在上下移动时隐藏了徽标。如何在不影响动画的情况下让div消失在按钮下方？

这是我的代码

HTML

    <!-- Here comes the animated navigation menu -->
        <div id="tab">
            <p><img id="arrow" onClick="toggle('box');" src="../images/down.gif" width="30px" height="40px" align="middle"></p>
        </div>

        <div id="box" class="hide" hidden="true">
            <div id="links">
                <div id="deco">
                    <div class="bt"><a href="index.html" >HOME</a></div>
                    <div class="bt"><a href="event.php" >EVENT</a></div>
                    <div class="bt"><a href="gallery.php" >GALLERY</a></div>
                    <div class="bt"><a href="archieve.php" >ARCHIEVE</a></div>
                    <div class="bt"><a href="about.html" >ABOUT</a></div>
                    <div class="bt"><a href="contact.php" >CONTACT</a></div>
                </div>
            </div>
        </div>
        <!-- Here ends the animated navigation menu -->

CSS3

    /*Animation Menu*/
#box{
    width: 95px;
    font-size: 12px;
    line-height: 20px;
    position: fixed;
    z-index: 100;
    border-style: solid;
    border-color: #0a0a0a;
    border-radius: 10px;
}

#tab{
    float: left;
    position: relative;
    z-index: 99;
}

#tab img
{
    padding-left:6px;
}

#links{
    width: 80px;
    padding: 10px;
    float: left;
}

.hide{
    margin-top:-500px; /* this specifies initial position of the menu */
            animation: dropupnav 2s linear;
    -webkit-animation: dropupnav 2s linear; /* we specify the animation for hiding */
}

.show{
    margin-top:50px; /* this specifies how much pixels to move to the top */
            animation: dropdownnav 1s linear;
    -webkit-animation: dropdownnav 1s linear; /* we specify the animation for showing */
}

#arrow, .bt{
    cursor: pointer;
}

.bt{
    width: 77px;
    height: 40px;
    margin: -1px;
    text-align:center;
   /* border:1px solid #858fa6;*/
    font: bold 13px Helvetica,Arial,sans-serif;
    text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
    background:#0a0a0a;
}

.bt a{
    line-height: 40px;
    color: #fff;
    display: block;
    text-decoration:none;
}

.award img{
    height:143px;
    width:38px;
    padding-top:10px;
}

.bt a:hover{
    color: #e3ae57;
}

.bt:hover{
    transition: background .3s linear;
    /*background: #dc3d24;*/
         -o-transition: background .3s linear;
       -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
}

#deco{
    width: 75px;
    float: left;
            box-shadow:0px 0px 5px #000;
       -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
}

@keyframes dropdownnav
{
from {top: -250px;}
to {top: 180px;}
}

@-webkit-keyframes dropdownnav /* Safari and Chrome */
{
from {top: -250px;}
to {top: 180px;}
}

@keyframes dropupnav
{
from {top: 700px;}
to {top: 0px;}
}

@-webkit-keyframes dropupnav /* Safari and Chrome */
{
from {top: 700px;}
to {top: 0px;}
}
/*Animation Menu End*/

的JavaScript

function toggle(id) {
    var el = document.getElementById(id);
    var img = document.getElementById("arrow");
    var box = el.getAttribute("class");
    var nav = document.getElementById("box");
    nav.hidden = false;
    if(box == "hide"){
        el.setAttribute("class", "show");
        delay(img, "../images/up.gif", 400);
    }
    else{
        el.setAttribute("class", "hide");
        delay(img, "../images/down.gif", 400);
    }
}

function delay(elem, src, delayTime){
    window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);
}