当我将鼠标悬停时，菜单项会移动

Question

我试图将我的菜单项悬停在灰色背景上，填充为5px。

问题在于，当我悬停我的菜单项时，由于悬停填充，它们正在移动。

但我不明白我怎么能解决这个问题，我正在尝试，但没有任何工作。

你知道如何解决这个问题吗？

.dropDownMenu a {
    height: 62px;
    line-height: 62px;
    padding: 0;
    float: left;
    font-size:16px;
    font-weight:bold;
    text-decoration: none;
    color: #ccc;
    box-sizing:border-box;
    background:yellow;

}

.dropDownMenu li span:hover {
    background-color:#ccc;color:#2F3083; border-radius:7px; padding:5px;
}

我在这里有完整的例子：http://jsfiddle.net/jcak/Lmc4mj2u/14/

Answer 1

只需.dropDownMenu li span padding: 5px，然后将其从悬停选择器中移除。

所以你得到：http://jsfiddle.net/Lmc4mj2u/15/而不是。