Link only clickable on border?

I have a couple of links encased in a border with a background... for some reason, the link is NOT clickable on the text, i.e., the cursor does not change to a hand on the link. It is only clickable on the BOTTOM border.... not sure why.

When I change around some of the CSS like the padding/margins/float, sometimes the links aren't even clickable at all. What could possibly be causing this??

THE CODE

<div id="teams">
    <ul>
    <li><a href="addyankees.php">Yankees</a></li>
    <li><a href="addphillies.php">Phillies</a></li></ul>
</div>

CSS

#teams {
    position: relative;
    top: -10px;
    left: -25px;
}

#team开发者_如何学JAVAs a{
    color: #000;
    padding: 10px 0px 10px 0px;
}

#teams li {
    background: #EEE;
    padding: 7px 2px;
    text-align: center;
    width: 75px;
    float: left;
    margin: 15px;
    font-size: 1.2em;
    border: 2px solid #C8C8C8;
    border-radius: 5px;
}

SOLVED

There was an invisible element blocking it. Credit to kei.

Right-click on the link and Inspect element. See if there are any transparent elements overlapping the link.