纯CSS实现Lavalamp效应的滑动菜单效果

<div class="nav ph-le-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

.nav {
overflow: hidden;
position: relative;
width: 480px; }
.nav a {
display: block;
position: relative;
float: left;
paddg: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
transition: .7s; }
.nav a:hover {
color: #c6342e; }

.effect {
position: absolute;
left: -12.5%;
transition: 0.7s ease--out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; / the middle of the first <a>