我有一个奇怪的问题,我的CSS导航菜单。代码在这里:CSS导航菜单没有正确定位
<style>
.navigation { width: 1010px; }
.navigation li { float: left; display: inline;}
.navigation li a { display: block; height: 60px; text-indent: -9999px; background: #EFE8C9 url(../images/bg/primary_navigation.gif) no-repeat 0 0;}
#link1 { width: 96px; background-position: 0 0; }
#link1:hover { background-position: 0 -60px; }
#link2 { width: 166px; background-position: -96px 0; }
#link2:hover { background-position: -96px -60px; }
#link3{ width: 138px; background-position: -262px 0; }
#link3:hover { background-position: -262px -60px; }
#link4 { width: 166px; background-position: -400px 0; }
#link4:hover { background-position: -400px -60px; }
#link5{ width: 134px; background-position: -566px 0; }
#link5:hover { background-position: -566px -60px; }
#link6 { width: 76px; background-position: -700px 0; }
#link6:hover { background-position: -700px -60px; }
#link7 { width: 108px; background-position: -776px 0; }
#link7:hover { background-position: -776px -60px; }
#link8 { width: 126px; background-position: -884px 0; }
#link8:hover { background-position: -884px -60px; }
</style>
<html>
<div id="primary_navigation">
<ul class="navigation">
<li><a href="#" id="link1">Link 1</a></li>
<li><a href="#" id="link2">Link 2</a></li>
<li><a href="#" id="link3">Link 3</a></li>
<li><a href="#" id="link4">Link 4</a></li>
<li><a href="#" id="link5">Link 5</a></li>
<li><a href="#" id="link6">Link 6</a></li>
<li><a href="#" id="link7">Link 7</a></li>
<li><a href="#" id="link8">Link 8</a></li>
</ul>
</div>
</html>
正如你所看到的菜单位置是关闭了约40个像素,我不明白为什么。我已经建立了很多这些菜单,从来没有这个问题!
我试过使用几个可以正常工作的版本,并将它们调整到这个菜单,但是一旦我测试它就会发生同样的问题。
我也试过在论坛上搜索类似的问题,但没有成功。
任何帮助是极大的赞赏。
感谢您的时间。
你有[证实](http://validator.w3.org/check?uri=http%3A% 2F%2Fwww.finalsalvo.com%2Ftest_site%2F&charset =%28detect +自动%29&doctype =内联&组= 0)页面? – Sparky
作为遗产,请在这里发布您的相关代码,它将超过您的网站,以便将来的用户可以从这个问题中学到一些东西。 –