triangle navigation hover effect

by Daniel Hug

HTML

<nav>
    <ul>
        <li><a href="#" class="active">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a></li>
    </ul>
</nav>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    float: left;
    width: 20%;
}

nav a {
    display: block;
    padding:5px;
    border-bottom:1px solid black;
    background:#fff;
    color:#000;
    font-weight:bold;
    position: relative;
}

nav a:hover, .active{
    background: #bbb;
}
nav a:hover:after {
    content: "";
    display: block;
    border: 12px solid #bbb;
    border-bottom-color: #000;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -12px;
}