为什么这个CSS样式我的元素没有正确？

Question

我正在尝试使用内联块导航栏。当有人在li上盘旋时，我希望它能改变背景颜色 - 足够简单。

好像我的代码导致背景大约2英寸。

这是违规代码 -

的CSS -

#mainNav {
    width: 100%;
    background:#bbb;
    border-right: 2px solid #777;
    border-left: 2px solid #777;
    border-bottom: 2px solid #555;
}

#mainNav ul li {
    display: inline-block;
    line-height:40px;
    font-size: 20px;
    padding: 0 15px 0 15px;
    border-right: 2px solid #777;
}

#mainNav ul li.active {
    background:#aaa;
}

#mainNav ul li:hover {
    background:#aaa;
}

HTML -

<div class='container_12'>
    <nav id="mainNav">
        <ul>
            <li class='active'><a href='#'>Home</a></li>
            <li><a href='#'>Games</a></li>
            <li><a href='#'>Forums</a></li>
        </ul>
    </nav>
</div>

截图：

Answer 1

将margin-left提交给li将解决问题。

DEMO

Answer 2

它也应该是：

#mainNav ul li:active { background:#aaa; }

就像悬停被编码一样。尽管如此，仍然不确定原始问题。