html - a href not clickable in the right area - Stack Overflow

CSS:

body {     background-image: url("../images/ITWorld.jpg");     background-repeat: no-repeat;     background-size: 150%;     font-family: sans-serif; }  p {     font-size: 22px; }  #navbar {     display: inline;     text-align: center;     font-size: 25px; }  a {     text-decoration: none;     font-family: sans-serif;     color: black; }  .listitem {     padding: 7px;     display: inline;     border: 3px solid black; }  a:hover {     color: white; }  .reference {     font-size: 22px;     padding-top: 50px;     padding-bottom: 50px; }  #overviewpara {     width: 800px; }  .referenceli {     padding: 5px; } 

HTML:

<ul>     <li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>     <li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li> </ul> 

My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.

Source: http://stackoverflow.com/questions/16139766/a-href-not-clickable-in-the-right-area

lamichael james acl earthquake los angeles unemployment 2012 nfl draft grades young justice nfl draft