CSS 导航 - 列表中的第一个锚点/按钮不起作用，而其他所有锚点/按钮都起作用？

Question

我创建了一个水平导航栏，类似于我以前做过的许多导航栏。令人费解的是，第一个链接无法正常工作，但所有其他链接都可以。当我用鼠标滚动链接时，第一个按钮有两件事不同：光标不会像页面上的所有其他链接/可点击项目一样变成手形，并且滚动效果不起作用。编辑：这里是所有相关材料的链接：http://finchsbrasserie.com/NewSite/

HTML

<div id="nav">
    <ul>
        <li id="bt1"><a href="#">Menus</a></li>
        <li id="bt2"><a href="#">Events</a></li>
        <li id="bt3"><a href="#">Farmer's Page</a></li>
        <li id="bt4"><a href="#">Hours and Location</a></li>
        <li id="bt5"><a href="#">Contact</a></li>
        <li id="bt6"><a href="#">About</a></li>
    </ul>
</div>

CSS

#nav{
position:absolute;
top:0px;
left:410px;
width:520px;
height:100px;
}
#nav ul li {
display:block;
float:left;
height:100px;
position:relative;
border-right:1px solid #d6df22;
}
#nav ul li a{
background-image:url('NavSprite.png');
background-repeat:no-repeat;
text-indent:-9999px;
overflow:hidden;
display:block;
float:left;
list-style:none;
margin:8px;
position:relative;
top:60%;
}
#bt1 a{
width:44px;
height:10px;
background-position:0px 0px;
}
#bt2 a{
width:48px;
height:10px;
background-position:0px -40px;
}
#bt3 a{
width:96px;
height:10px;
background-position:0px -80px;
}
#bt4 a{
width:125px;
height:10px;
background-position:0px -120px;
}
#bt5 a{
width:62px;
height:10px;
background-position:0px -160px;
}
#bt6 a{
width:44px;
height:10px;
background-position:0px -200px;
}
#bt1 a:hover{
width:44px;
height:10px;
background-position:0px -20px;
}
#bt2 a:hover{
width:48px;
height:10px;
background-position:0px -60px;
}
#bt3 a:hover{
width:96px;
height:10px;
background-position:0px -100px;
}
#bt4 a:hover{
width:125px;
height:10px;
background-position:0px -140px;
}
#bt5 a:hover{
width:62px;
height:10px;
background-position:0px -180px;
}
#bt6 a:hover{
width:44px;
height:10px;
background-position:0px -220px;
}

Answer 1

徽标悬停在菜单上，因此即使第一个菜单项可见，您实际上也无法使用它。 （徽标在链接上有透明背景）

这是一个简单的修复，在菜单中添加一些 z-index ：

#nav{
    background: blue;
    position:absolute;
    top:0px;
    left:410px;
    width:520px;
    height:120px;
    z-index: 20;
}

应该可以修复它。

幸好你发布了网站，因为这与菜单无关：p

Answer 2

在这里，它在 Chrome 和 IE 上运行得很好。虽然我发现悬停区域有点太小了。

我唯一看到的是第六个项目下降到第二行，因为 div 太窄（或者项目太宽）。

Answer 3

将此样式替换为 mainstyle.css 文件中第 38 行的样式

#nav {
height: 100px;
left: 410px;
position: absolute;
top: 0;
width: 520px;
z-index: 9999;

}

将 z-index 设置为高于徽标即可解决问题。