Link hover example for https://github.com/mhulse/css-issues/issues/184

avr_links.css

.avr_links,
.avr_links ul,
.avr_links li {
    margin: 0;
    padding: 0;
}
.avr_links {
    font-size: 1.4rem;
}
.avr_links li {
    border-bottom: 1px solid #999;
    list-style: none;
}
.avr_links ul {
    background: #ccc;
}
.avr_links ul li {
	border-bottom: 0;
    border-top: 1px solid #999;
}
.avr_links > li > a {
	font-weight: bold;
}
.avr_links a {
    display: block;
    padding: 1rem;
}
.avr_links ul a {
    font-size: 1.2rem;
    padding: 1rem;
}
.avr_links a,
.avr_links a:visited {
	color: #333;
	text-decoration: none;
}
.avr_links a:visited:hover,
.avr_links a:focus,
.avr_links a:focus:hover,
.avr_links a:hover,
.avr_links a:active,
.avr_links a.avr_links-active {
	color: #000;
    background-image: linear-gradient(
        transparent,
        rgba(0, 0, 0, .05) 40%,
        rgba(0, 0, 0, .1)
    );
}
.avr_links a:focus {
    outline: 0;
}
.avr_links a:active {
    box-shadow: 0 0 0 .05em rgba(0, 0, 0, 0.1) inset,
                0 0 1em rgba(0, 0, 0, 0.2) inset;
}
.avr_links ul a
.avr_links ul a:visited:hover,
.avr_links ul a:focus,
.avr_links ul a:focus:hover,
.avr_links ul a:hover,
.avr_links ul a:active,
.avr_links ul a.avr_links-active {
	background-image: linear-gradient(
        rgba(19, 141, 156, 0.25),
        rgba(19, 141, 156, 0.25)
    );
}

avr_links.html

<ul class="avr_links">
    <li>
        <a href="report">Report</a>
        <ul>
            <li><a href="report">Home</a></li>
            <li><a href="report/something-wrong">Something Wrong</a></li>
            <li><a href="report/something-right">Something Right</a></li>
            <li><a href="report/status-of-reports">Status of Reports</a></li>
        </ul>
    </li>
    <li><a href="report/school-links">School Links</a></li>
    <li><a href="report/how-to-use">How to Use</a></li>
    <li><a href="report/account">Account</a></li>
</ul>