css - 修复在 Firefox 中的活动？

Question

在 Firefox 中遇到一个小问题：http: //jsfiddle.net/3jmeS/，当单击链接active样式时，所有元素都会触发，但我只需要当前。有解决办法吗？

HTML：

<nav>
    <div id="left-nav">
        <ul>
            <li class="active">
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
        </ul>
    </div>
</nav>

CSS：

#left-nav {
    float: left;
    font-family: Tahoma;
    font-size: 13px;
    height: 38px;
    position: relative;
    width: 600px;
    min-width: 600px;
}

#left-nav li{
    display: inline-block;
    padding: 0 12px;
}

#left-nav li a {
    color: #fff;
    display: block;
    line-height: 35px;
    padding: 0 11px;
}

#left-nav li a:active{
    position: relative;
    top:1px;
}

#left-nav li.active a{
    display: block;
}