CSS HTML Cant点击链接

Question

我在这里有这个页面:http://artendijen.com/product/animals-stream/并且右侧有链接,但是我无法点击它们...有谁知道为什么？

左边:

<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>

右边:

<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:

.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只是向右浮动,但这里是右侧列表项的CSS:

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

Answer 1

列表:

<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>

被它后面的div覆盖.将以下CSS添加到您的列表中,它将是可点击的:

position: relative;
z-index: 1;

或者,您可以清除列表后面的div:

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

通过增加 clear: both;