CSS Navigation - First anchor/button in list does not work when all others do?

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 differen开发者_StackOverflowt 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;
}

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

Here, it's working just fine with Chrome and IE. Though I find the hovering area's a little too small sized.

The only thing I see is the sixth item dropping down to the second line, because the div is too narrow (, or the items being too wide).

replace this style with your at line 38 in mainstyle.css file

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

}

setting z-index to higher than logo will solve the problem.