使用纯CSS在菜单下滑动箭头

Question

当我悬停在菜单上时，我希望箭头会从左侧滑到我当前悬停的菜单项上。

在JavaScript中，我会绑定一个事件来悬停并使用箭头元素的"left“属性，但我想知道是否可以有一个纯css3动画解决方案。

箭头类似于此线程- Show border triangle in navbar using CSS

但我不希望它出现和隐藏-我希望箭头始终可见，并且它将根据我当前悬停的菜单从右向左滑动。

如果我在JS中完成它，它会是这样的：

​

var arrEle = $("#indication-mark-wrap");
var startHover = $(arrEle).css("left");
$("li").mouseenter(function() {
  var left = $(this).position().left;
  $(arrEle).css("left", left+30);
});

$("li").mouseleave(function() {
  $(arrEle).css("left", startHover);
});

ul {
  list-style-type: none;
  padding: 0px;
}

li {
  display: inline-block;
  width: 80px;
  color: white;
  background-color: black;
  height: 50px;
}

#indication-mark-wrap {
  position: absolute;
  left: 38px;
  top: 56px;
  background: wheat;
  -webkit-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990);
  -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990);
  -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990);
  transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990);
  -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990);
  -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990);
  transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990);
  /* custom */
}

.indication-mark {
  position: relative;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li>Selection1</li>
    <li>Selection2</li>
    <li>Selection2</li>
  </ul>
</div>

<div id="indication-mark-wrap">
  <canvas width="20" height="20" class="indication-mark"></canvas>
</div>

​

Sample JSFiddle