html - CSS hover off transition not working -

i making navigation buttons portfolio website, hovering works once mouse hovers off, button pops original position instead of transitioning slowly.

here code:

li {    list-style-type: none;    margin: 20px 5px 0px 5px;  }  nav ul li {    display: block;    margin: 30px 10px;    text-decoration: none !important;    text-align: center;    width: 90px;    padding: 6px 0;    border-radius: 4px;    -o-transition: 300ms ease-in-out;    -ms-transition: 300ms ease-in-out;    -webkit-transition: 300ms ease-in-out;    -moz-transition: 300ms ease-in-out;    transition: 300ms ease-in-out;    background: #e6e5cc;    float: right;    top: 0px;    left: 0px;  }  nav ul li a:hover {    color: inherit;    position: relative;    top: 0px;    right: 0;    bottom: 0;    left: 0px;    top: -5px;    left: -5px;    box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a;    background: #f7f6ee;  }  nav ul li a:active {    color: inherit;    top: 5px;    left: 5px;    box-shadow: 0px 0px 5px white;  }

<nav>    <ul>      <li>        <a href="#">contact</a>      </li>      <li>        <a href="#">projects</a>      </li>      <li>        <a href="#">blog</a>      </li>      <li>        <a href="#">about</a>      </li>    </ul>  </nav>

just set nav ul li a position: relative; , work expected.

css

nav ul li {   position: relative; } 

li {    list-style-type: none;    margin: 20px 5px 0px 5px;  }  nav ul li {    display: block;    margin: 30px 10px;    text-decoration: none !important;    text-align: center;    width: 90px;    padding: 6px 0;    border-radius: 4px;    -o-transition: 300ms ease-in-out;    -ms-transition: 300ms ease-in-out;    -webkit-transition: 300ms ease-in-out;    -moz-transition: 300ms ease-in-out;    transition: 300ms ease-in-out;    background: #e6e5cc;    float: right;    top: 0px;    left: 0px;    position: relative;  }  nav ul li a:hover {    color: inherit;    position: relative;    top: 0px;    right: 0;    bottom: 0;    left: 0px;    top: -5px;    left: -5px;    box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a;    background: #f7f6ee;  }  nav ul li a:active {    color: inherit;    top: 5px;    left: 5px;    box-shadow: 0px 0px 5px white;  }

<nav>    <ul>      <li>        <a href="#">contact</a>      </li>      <li>        <a href="#">projects</a>      </li>      <li>        <a href="#">blog</a>      </li>      <li>        <a href="#">about</a>      </li>    </ul>  </nav>

jsfiddle