先打开控制台看看报错信息

document.getElementsByClassName("shopNavright").document.getElementsByTagName('a');

看看这写的都是啥，很多报错信息。
点击这里，去查各种获取元素的api的正确用法。
自己先修改下。

补充：其实天猫的是纯css写的；
然后你上面的js目前是能跑的；
css

#shopNav{
    position: absolute;
    left: 100px;
    top: 100px;
}
.hover{
    background-color: red;
    /*width: 50px;*/
    height: 40px;
    line-height: 40px;
}
.hover .cat{
    position: absolute;
    top:0;
    left: 15%;
    width: 70%;
    height: 10px;
    transition: all .4s;
    translateY(0px);
    background-color: red;
    opacity: 0;
}
.hover:hover .cat{
    transform: translateY(-10px);
    opacity: 1;
}

html

<p id="shopNav">
   <p class="hover">
       天猫会员
       <p class="cat" data="我是小猫头">
           
       </p>
   </p>
 </p>

用js的话也是不使用hover,直接添加包含这个的transform: ranslateY(-10px);opacity: 1;的类，触发transition过渡，jQuery的一样，只是不是通过添加类名而是通过添加和删除内联样式触发过渡。

<script type="text/javascript">
  window.onload=function(){ 
 var catEar=document.getElementsByName("catEar");
 var catEarTop=catEar.offsetTop;
 var catEarLeft=catEar.offsetLeft;
 var as = document.getElementsByTagName('a');
 for(var i=0;i<as.length;i++){
      as[i].index=i;
      as[i].onmouseover=function(){
        catEarTop="200px";    //自己尝试的各种方法= =
        catEarLeft="200px";
      }
     }
}
</script>

朋友我帮你修改到这一步了，还有点问题，自己试着改下...

和楼上的朋友一样，建议你学习用Chrome console学会调试代码。

题外话：

原生写完这个后，学习一下jquery，原生js操作DOM有点费劲的。

像这样天猫特效我认为用css就可以完全实现，加一个hover就可以了。

看来你对动画蛮感兴趣，推荐你学习两个动画库，animate.cssh和velocity.js。

朋友，加油。