I have created a horizontal navigation bar similar to many I have done before. Inexplicably, the first link does not function properly but all others do. When I roll over the link with the mouse, two things are different in the first button: the cursor does not change to a hand as with all other links/clickable items on the page and the rollover effect does not function. EDIT: Here is a link to all relevant materials: http://finchsbrasserie.com/NewSite/
HTML
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;
} 以上就是CSS Navigation - First anchor/button in list does not work when all others do?的详细内容，更多请关注web前端其它相关文章！
上一篇putting all of your script calls in an include file 下一篇A clickable image on top of an image
