Anchor not respecting height - html

Question

I have a large textual menu where each link is stacked vertically. The problem is the active link space is overlapping onto the other menu items, thus making it difficult to accurately click a link.
Example: http://jsfiddle.net/dhyz48j3/1/
Here's the source code:
<div id="menu">
<span>
Still Life<span class="divider">/</span><br/>
Interiors<span class="divider">/</span><br/>
Books<span class="divider">/</span><br/>
Personal
</span>
</div>
CSS:
#menu span, #menu span a {
font-family: sans-serif;
font-size: 6.1vw;
line-height: 4.7vw;
letter-spacing: -0.0425em;
text-decoration: none;
color: #ccc;
display: inline-block;
}
#menu span a:hover {
color: #aaa;
}
You can see on the fiddle that the links do not work accurately because they are larger than they should be. How do I fix the?

Answer 1

What atmd has suggested are great tips for your code, but won't fix your problem:
font-size: 6.1vw;
line-height: 4.7vw;
Are your perpetrators here. I can see you've done this to butt the lines up to each other and reduce the line space. The problem you have is that the font used has extra space above and below the letters, so the whole element is still taking up 6.1vw, even thought the next element is only 4.7vw below it, so the anchor elements are overlapping.
Your way of fixing this is to mitigate the extra padding for the text element using a height and overflow:hidden, both on a parent element, and then positioning the anchor text to the be in the centre of the parent element. A working example: http://jsfiddle.net/dhyz48j3/3/

Answer 2

for a list like this you'd be better of using the ul tag
These stack vertically by default
<ul>
<li>Still Life</li>
<li>Interiors</li>
<li>Books</li>
<li>Personal</li>
</ul>
This way you remove the extra mark up and you can create the dividers with css too
#menu span, #menu span a {
font-family: sans-serif;
font-size: 6.1vw;
line-height: 4.7vw;
letter-spacing: -0.0425em;
text-decoration: none;
color: #ccc;
}
#menu span a:hover {
color: #aaa;
}
#menu span a:after {
content: "/";
}
#menu span a:last-child:after {
content: "";
}