Question

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

<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

The logo is hovering over the menu, so you effectively can’t use the first menu item even though it is visible. (the logo has a transparent background over the link)

This is an easy fix, add some z-index to the menu:

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

That should fix it.

Good thing you posted the website because this had nothing to do with the menu tbh :p