-Menu-L3-
-HTML-
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </body>
-CSS-
* { margin: 0; padding: 0; } ul { width: 270px; margin: 20px; padding: 10px 5px; background: white; list-style: none; } ul li { background: gold; text-align: center; } ul li:not(:last-of-type) { margin-bottom: 10px; } a { display: block; padding: 25px 0; border-left: solid 30px goldenrod; text-decoration: none; color: olive; } a:hover { background: rgba(184,134,11,0.9)/*darkgoldenrod*/; border-right: solid 30px gold; border-left-color: transparent; color: white; }