<div> <ul> <li><a href="#">Yummy</a></li> <li><a href="#">Yay! Yay!</a></li> <li><a href="#">Wookie</a></li> </ul> </div>
* { margin: 0; padding: 0; } ul { margin-left: 40px; /* Por tener algo de espacio a la izquierda */ background: #cfcfcf; list-style: none; } ul li a { display: block; margin: 20px 0; padding: 10px; } ul li a:hover { position: relative; left: -20px; padding-left: 30px; background: grey; color: white; } ul li a:hover:before { position: absolute; left: 0; bottom: -20px; content: ""; width: 0; height: 0; border-top: 20px solid black; border-left: 20px solid transparent; z-index: 2; }