A Pen by Oloman.

CSS-Sliding-hover-effect.markdown

CSS Sliding hover effect

Horizontal menu with sliding effect when you hover it, pure CSS

A Pen by Oloman on CodePen.

License.

index.html

<div class="menudes">
<a href="">Inicio</a>
<a href="">Portfolio</a>
<a href="">Acerca de</a>
<a href="">Contacto</a>
<div class="marca"></div>
</div>

style.css

.menudes {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 40px auto;
  background: #333;
  font-size:0;
}
.menudes a {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 25%; /* 100% divided of number of elements */
  box-sizing: border-box;
  border-right: 2px solid #fff;
  padding: 10px 5px;
  color: #fff;
  text-decoration: none;
  text-align:center;
  font-size: 14px;
}
.marca {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -30%; /* at least width of .menudes a */
  width: 25%;
  height: 40px;
  box-sizing: border-box;
  background: #fff;
  opacity:.5;
  transition: 0.5s ease-in-out;
}
.menudes a:nth-child(1):hover ~ .marca {
  left: 0%; 
}
.menudes a:nth-child(2):hover ~ .marca {
  left: 25%; /* 1/4 total width */
}
.menudes a:nth-child(3):hover ~ .marca {
  left: 50%; /* 2/4 total width */
}
.menudes a:nth-child(4):hover ~ .marca {
  left: 75%; /* 3/4 total width */
}