html - 悬停时如何阻止文本移动？ (涉及背景图像)

Question

这基本上就是我现在面临的问题，http://jsfiddle.net/NCJeP/ .

HTML

      <nav>
    <ul id="city-navigation">
        <li><a href="../chennai/" class="active">Chennai</a></li>
        <li><a href="../trichy/">Trichy</a></li>
        <li><a href="../madurai/">Madurai</a></li>
        <li><a href="../coimbatore/">Coimbatore</a></li>
        <li><a href="../salem/">Salem</a></li>
    </ul>
    </nav>​

CSS

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}​

由于背景图像增加了额外的宽度，我似乎无法弄清楚如何阻止文本向右移动。我知道有足够的空间，我只希望图像和文本是静态的。

如果有人能帮忙，我将不胜感激! =)干杯!

Answer 1

悬停的宽度导致了跳跃。我将其移至“a”标签并稍微清理了其他代码:

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
    display: block;
    text-align: center;
    width: 116px;
    height: 60px;
}
#city-navigation li a:hover {
    background: url(http://i.imgur.com/QVzKG.png) no-repeat;
    color: #000;
}
#city-navigation .active {
    background: url(http://i.imgur.com/HbLa1.png) no-repeat;
    color: #000;
}