Source Code Release - CSS3 Animation Menu

Here’s a complete implementation of an animated navigation menu with a moving arrow indicator:
<html>
<head>
<style type="text/css">
body {
  background:#9cb4b3;
}
div.moving_arrow {
  width:640px;
  height:25px;
  margin:50px auto;
}
.moving_arrow ul {
  margin:0;
  padding:10px;
  border-radius:8px;
  height:inherit;
  width:inherit;
  background:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(1, #e5e5e5)
  ) #e5e5e5;
  -webkit-box-shadow:0px 0px 6px #555;
}
.moving_arrow ul li {
  list-style:none;
  float:left;
  margin-right:11px;
}
.moving_arrow ul li a {
  display:block;
  float:left;
  padding:4px 8px 8px 8px;
  font-family:helvetica;
  text-shadow:0px 1px 1px white;
  color:#666;
  font-weight:700;
  text-decoration:none;
}
.moving_arrow li img {
  float:left;
  padding:4px 3px 8px 8px;
}
#arrow {
  width:12px;
  -webkit-transition:margin-left 400ms ease-out;
  margin-left:50px;
}
#arrow svg, #arrow polygon {
  width:12px;
}
#arrow.home {margin-left:54px;}
#arrow.apps {margin-left:150px;}
#arrow.blog {margin-left:233px;}
#arrow.about {margin-left:339px;}
#arrow.support {margin-left:457px;}
#arrow.contact {margin-left:569px;}
#arrow polygon {
  text-shadow:0px 1px 1px black;
  -webkit-box-shadow:0px 0px 6px black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".moving_arrow ul li a").mouseover(function() {
    $("#arrow").removeAttr("class").addClass($(this).attr("class"));
    return false;
  });
});
</script>
</head>
<body>
<div class="moving_arrow">
  <ul>
    <li>
      <img src="icon.png"/>
      <a class="home" href="">Home</a>
    </li>
    <li>
      <img src="icon.png"/>
      <a class="apps" href="">Apps</a>
    </li>
    <li>
      <img src="icon.png"/>
      <a class="blog" href="">Blog</a>
    </li>
    <li>
      <img src="icon.png"/>
      <a class="about" href="">About Us</a>
    </li>
    <li>
      <img src="icon.png"/>
      <a class="support" href="">Support</a>
    </li>
    <li>
      <img src="icon.png"/>
      <a class="contact" href="">Contact</a>
    </li>
  </ul>
  <div id="arrow">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="12px" height="7px">
      <polygon id="arrow_thumb_shadow" points="0,0 6,7 12,0" fill="#333"/>
      <polygon id="arrow_thumb" points="0,0 6,6 12,0" fill="#e5e5e5"/>
    </svg>
  </div>
</div>
</body>
</html>