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

drexel dale george will obama birth certificate nick cannon lindsay lohan saturday night live snl lindsay lohan