Firefox "slide" hover transitions

Question

First and for most I would like to say "Hello" to the community. I'm an entry level junior web designer fresh out of vocational school. Most of my styling in CSS I've taught myself so this has led me to some problems. Such as the one below.

This is a sample of my navigation bar that I'm using for my site. Each of the div boxes are supposed to slide out to their corresponding positions over 2 seconds. However with every browser aside from chrome they snap out quickly instead of a smooth transition.

http://jsfiddle.net/kwh71787/cxBxL/

If anyone has any insight please help

Answer 1

Try using this style instead:

#navbuttons div {
    position: absolute;
    left: 0px;
}

DEMO