-position-L5-
-HTML-
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body>
-CSS-
* { margin: 0; padding: 0; } ul { margin: 20px; list-style: none; } li { width: 200px; line-height: 70px; background: tomato; text-align: center; } li:not(:last-of-type) { margin-bottom: 5px; } a { display: block; text-decoration: none; color: white; position: relative; } a:after { display: block; content: ""; width: 0px; height: 0px; margin-top: -10px; border: solid 10px transparent; border-left-color: tomato; position: absolute; top: 50%; left: 100%; } a:hover { background: salmon; } a:hover:after { border-left-color: salmon; }