添加左侧，顶部默认值link demo

left: 0px

你试过设置你的列表的父项吗？我知道有时相对项会有问题，除非底层项也是相对项或绝对项。只是一个想法。

使用position：absolute，它将把它从正常的文档流中取出，你也可以给予它z-index：5，以确保它浮动在其他元素之上。

.transition{
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition:all .4s;
    -o-transition: all .4s;
    
    margin-top:20px;
    border:1px solid gray;   
    width:80px;
    padding:10px;
    margin-left:50px;
    position:relative; 
    cursor:pointer;
}

.hover_top{ 
    top:0;
}
.hover_top:hover{
    top:-10px;
}

.hover_left{    
    left:0;
}
.hover_left:hover{
    left:-10px;
}

.hover_right{   
    right:0;
}
.hover_right:hover{
    right:-10px;
}

<div class="hover_top transition"> Hover Top </div>
 <div class="hover_left transition"> Hover Left </div>
 <div class="hover_right transition"> Hover Right </div>

必须定义要应用过渡效果的属性。例如：

.box { position: relative; transition: all 0.4s ease;}
.box:hover { top: -1rem;}

那是行不通的。所以你必须定义top：默认为0，悬停时为顶部-1rem。

.box { position: relative; transition: all 0.4s ease; top:0}
.box:hover {top: -1rem}

那就行了。