CSS shifts from transition not working

Question

I make navigation buttons for the portfolio website, the freeze works fine, but as soon as the mouse leans back, the button returns to its original position, rather than slowly returning.

Here is the code:

li {
  list-style-type: none;
  margin: 20px 5px 0px 5px;
}
nav ul li a {
  display: block;
  margin: 30px 10px;
  text-decoration: none !important;
  text-align: center;
  width: 90px;
  padding: 6px 0;
  border-radius: 4px;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 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>

Run codeHide result

Answer 1

Just install nav ul li aon position: relative;and it will work as expected.

CSS

nav ul li a {
  position: relative;
}

li {
  list-style-type: none;
  margin: 20px 5px 0px 5px;
}
nav ul li a {
  display: block;
  margin: 30px 10px;
  text-decoration: none !important;
  text-align: center;
  width: 90px;
  padding: 6px 0;
  border-radius: 4px;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 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>

Run codeHide result

Jsfiddle

Answer 2

You had an operator position:relativein the rule :hover, while it should have been in the original state rule. In addition, you had some duplicate positional overlap values.

li {
  list-style-type: none;
  margin: 20px 5px 0px 5px;
}
nav ul li a {
  display: block;
  margin: 30px 10px;
  text-decoration: none !important;
  text-align: center;
  width: 90px;
  padding: 6px 0;
  border-radius: 4px;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  background: #E6E5CC;
  float: right;
  position: relative;
  top: 0px;
  left: 0px;
}
nav ul li a:hover {
  color: inherit;
  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>

Run codeHide result

Answer 3

nav ul li a position: relative; :

nav ul li a {
  display: block;
  margin: 30px 10px;
  text-decoration: none !important;
  text-align: center;
  width: 90px;
  padding: 6px 0;
  border-radius: 4px;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  background: #E6E5CC;
  float: right;
  top: 0px;
  left: 0px;
  position: relative;
}