Why are only some of my links selectable and react when hovered over?

Question

I'm working on a tumblr theme and have run across a problem with my links. The links in my navigation bar (.navstuff) respond when hovered over and lead to a link which is what I want. In my posts, the tags, dates, heart/reblog buttons, and note count should all respond when hovered over, but none of them do except for the post on the bottom. Why is this happening and how can I fix this? You can see it on jsfiddle here.

.tags {
    text-align: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a {
    color: #808080; /*link color remove link underline */
    text-decoration:none;
}
a:hover {
    color: #f5cfe0; /*hover over link */
}

<div class="post">
            {block:Title}
                <h3>
                    <a href="{Permalink}">{Title}</a>
                </h3>
            {/block:Title}
            {Body}
            <ul class="like-reblog">
              <li>{LikeButton}</li>
              <li>{ReblogButton}</li>
              <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
              <li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
            </ul>
            {block:HasTags}
            <ul class="tags">
                <li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
            </ul>
            {/block:HasTags}
            </div>

Thank you.

Answer 1

This is because your div #sidebar is overlaying the content. Add a stacking context to place it below your posts:

#sidebar {
    position: fixed;
    z-index: -1;
}