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

MC Chris Colorado shooting suspect accuweather Finding Nemo 2 Provigil dez bryant Kitty Wells