list

by makingthings

HTML

<div id="nav-main">
    <div class="table">
    <ul>
        <li class="active"><a href="#">bout</a></li><li><a href="#">pianist</a></li><li><a href="#">lessons</a></li><li><a href="#">courses</a></li><li><a href="#">composers</a></li><li><a href="#">listen</a></li><li><a href="#">shop</a></li>
    </ul>
    </div>
</div>

CSS

body {font-size: 100%; font-family :helvetica;}

.table {
        display: table;
        margin: 0 auto;
}
a{text-decoration: none; color: grey; font-weight: bold; font-size;0.875em}

ul {min-width: 696px; list-style: none; margin: 24px 0}

li{ display: inline; position: relative;}

li a {padding: 6px 12px 4px; height: 24px; background: teal; margin-right: 12px}
li a:hover::before {content:"•"; color: red; position: absolute; right:50%; top: -30px; height: 12px; font-size:52px  }