Why are footer links not accessible on some pages?

I am just finishing up a site and discovered that the footer navigation on some pages is "covered" by something that is preventing the links from responding to mouse over.

Here is the site: http://summitlandscapesupply.com/products/loxley-al

However, I am using the same code base for the footer content on the home page: http://summitlandscapesupply.com, which works fine.

I am using the Sticky Footer option, which may be impacting this, but I can't figure out why it works on one page and not the other.

Here is the html:

<div id="footer">
<div id="bottom-border"></div>
<p>&copy; 2012 Summit Landscape</p>
<nav>
<ul>
<li><a href="http://summitlandscapesupply.com/">Home</a></li>
<li><a href="http://summitlandscapesupply.com/about-us">About</a></li>
<li><a href="http://summitlandscapesupply.com/terms-and-conditions">Terms of Service</a></li>
<li><a href="http://summitlandscapesupply.com/privacy">Privacy</a></li>
</ul>
</nav>
</div>
</body>
</html>

Here is the CSS:

#footer     { 
    clear: both; 
    width: 100%; 
    display: block; 
    text-align: center;
    background: #f7f4e8; 
    margin-top: -120px; /* negative value of footer height */
    height: 120px;                       
    }

.clearfix:after { content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

* html .clearfix { height: 1%;} 
#bottom-border   { 
    width: 100%; 
    height:35px; 
    background: url(/images/bg_footer-bar.png) repeat-x; 
    }

Any help clearing this up will appreciated.

Thanks.