CSS HTML Cant click on links

Question

I have this page here: http://artendijen.com/product/animals-stream/ and there are links on the right side, however I can't click on them...does anyone know why?

Left Side:

<nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendijen.com">Home</a> / <a class="home" href="/shop">Gallery &amp; Shopping</a> / <a href="http://artendijen.com/product-category/small/#108">Small</a> / Animals by the Stream</nav>

Right Side:

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li><li><a href="/cart">Cart</a></li></ul>`

CSS for left side:

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb {
    float: left;
    z-index: 99999;
    position: relative;
    margin: 0 0 1em;
    padding: 0;
    font-size: .92em;
    color: #777;
}

CSS for right side is just float right, but here is the CSS for the list items on the right side:

.shoppingBread li {
    padding-bottom: 5px;
    text-align: right;
}

Answer 1

The list:

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li></ul>

is being covered by a div that comes after it. Add the following CSS to your list and it will be clickable:

position: relative;
z-index: 1;

OR, you can just clear the div that comes after the list:

<div itemscope="" itemtype="http://schema.org/Product" id="product-108" class="post-108 product type-product status-publish hentry instock">

by adding clear: both;

Answer 2

Remove the following from your css:

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product {

    position: relative;  ///Remove this 
}