Question

I have recently been studying up a ton on CSS3, and I’ve made a design just for fun with a ton of unnecessary features and effects. Here it is:

http://wendyhenrichs.com/could/

If you take a look at my navigation bar at the top, you’ll notice that when you hover over a link, it moves 7 pixels to the right in a smooth, transition motion.

But then notice, when your take your mouse off the link, it will just immediately hop back into its original position.

Is there any way to make it fade back into position in a smooth motion, as it moved before?

Answer 1

Yes there’s a way.. give it a position to transition back to

you already have the transition on the default a so just set the nav as relative position to back to 0; it will need position: relative too, so if you just put position: relative on the default state, then you just manipulate the left co-ordinate on the hover state

#nav ul li a {
  color: red;
  text-decoration: none;
  position: relative;
  left: 0;
}

#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li a:active {
  color: white;
  left: 7px;
}

Working Example: HERE