html - CSS悬停:似乎不起作用

我正在设置导航栏，方法是：

<div id="globalheader">
        <ul id="globalnav">
            <li id="home"><a href="#">Home</a></li>
        </ul>
</div>

请注意，我删除了更多的项目，因为它会使这个例子太大。
现在，这是我的CSS：

/* GLOBALHEADER */
#globalheader { width: 506px; height: 36.75px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 101.2px; height: 0; padding-top: 36.75px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalnav { background-image: url(navbar.png); background-repeat: no-repeat; }


/* BUTTONS */
#globalheader #globalnav li#home a { background-position: 0 0; }

/* OVER STATES */
#globalheader #globalnav li#home a:hover { background-position: 0 -37; }

/* PRESSED STATES */
#globalheader #globalnav li#home a:active { background-position: 0 -73.5px; }

现在，有更多的项目（如我之前所说）我取出只是为了空间的缘故。
这里的问题是：按钮显示良好，还有active状态。然而，hover似乎根本不起作用。有什么想法吗？

最佳答案

试着把PX添加到你的位置

#globalheader #globalnav li#home a:hover { background-position: 0 -37px; }