```
.header {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:50px;
        z-index:2
}    
.menu ul {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .menu ul.is-visible {
        -webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

```

The above is the CSS I use to toggle a menu open/close using a transition element for a sliding down/up effect. 

Currently the menu slides from the top of the header; is it possible for it to slide from the bottom of the header which is 50px from the top?

I'm still trying to learn how to use transition, so any advice is much appreciated.

Thanks!