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

gunner kiel groundhog soulja boy punxsutawney phil ground hog groundhog day 2012 serrano