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

kanye west Univision josh hamilton Susan Rice the Who jon bon jovi jon bon jovi