Html CSS3中的按钮不可单击

我想用HTML制作一些精美的社交按钮，包括CSS3和列表。应该是这样的。但是现在不可能单击锚点（a标记）

我怎样才能做到这一点

ul{
列表样式：外部无；
}
ulli{
显示：块；
浮动：左；
背景色：#099；
右边距：10px；
填充：10px 0px；
文本对齐：居中；
宽度：40px；
不透明度：0.2；
过渡：所有0.2秒缓进缓出0秒；
}
李：以前{
颜色：#FFF；
字体大小：35px；
}
ullia{
颜色：透明；
字体：0px/0a；
空白：nowrap；
}
ulli：悬停{
不透明度：1；
}

添加相对于li元素的位置，然后拉伸锚固件

ul li {
    display: block;
    float: left;
    background-color: #099;
    margin-right: 10px;
    padding: 10px 0px;
    text-align: center;
    width: 40px;
    opacity: 0.2;
    transition: all 0.2s ease-in-out 0s;

    /* Add position */
    position:relative;
    }

ul li a {
    color: transparent;
    font: 0px/0 a;
    white-space: nowrap;

   /* Stretch a element */
   position: absolute;
   left:0;
   top:0;
   width:100%;
   height: 100%;
}

谢谢在我的浏览器（Firefox）中，a标签已经填满了屏幕，只有Facebook按钮可以点击。我希望两个按钮都是可点击的，并且只与父标签一样大。@Josjojo请检查此项