See if the below works for you. I don't believe this or the code on the wesbite example you provided is the brightest solution in the box to use because if you zoom the text the whole thing starts to breaks down. Probably produced by some designer without any consideration for end users text sizing.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<title>Arrow Anchor Tag</title>
<style>
body {
font-family: helvetica, sans-serif;
}
nav {
width: 25%;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
list-style: none;
}
nav a {
margin: 0;
position: relative;
padding: 18px 20px;
display: block;
text-decoration: none;
color: #666;
}
nav a:hover {
background: #70C1A0;
color: #fff;
}
/* ARROW */
nav a:hover:after {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
nav a:hover:after {
top: 0;
border-color: transparent transparent transparent #70C1A0;
border-width: 26px;
}
/* ACTIVE TAB */
.active a {
background-color: #70C1A0;
color: #fff;
}
.active a:after {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
top: 0;
border-color: transparent transparent transparent #70C1A0;
border-width: 26px;
}
</style>
</head>
<body>
<nav>
<li><a href="#">Vision</a></li>
<li class="active"><a href="#">Governance</a></li>
<li><a href="#">Our Board</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Advocacy</a></li>
</nav>
</body>
</html>
AdChoices