Hi all,
I have been scratching my head for 2 days in fixing it. Here is the problem - the links are not working, and it shown whole nav.gif. Please help. Thanks in advance.

Here is the html:
<div id="nav" >
<ul id="nav" name="nav">
<li id="n-main"><a href="/" title="welcome" >main</a></li>
<li id="n-work"><a href="/work/" title="work samples">work</a></li>
<li id="n-about"><a href="/about/" title="Find out more">about</a></li>
<li id="n-contact"><a href="/contact/" title="Get in touch, hire me or ask me a question">contact</a></li>
</ul>
</div>

Here's the CSS:
#nav {
position:absolute;
top:259px;
left:830px;
width: 160px;
height: 110px;
background:url(/assets/images/nav.gif) no-repeat;
margin: 0;
padding: 0;
float: left;
}

#nav ul li, #nav ul a {
background:url(/images/nav.gif) no-repeat;
display:block;
height:28px;
overflow: hidden;
text-indent:-5000px;
width:80px;
}
li#n-main a {
background-position:0px;
}
li#n-work a {
background-position:0pt -28px;
}
li#n-about a {
background-position:0pt -56px;
}
li#n-contact a {
background-position:0pt -84px;
}
li#n-main {
background-position:-80px 0pt;
}
li#n-work a {
background-position:-80px -28px;
}
li#n-about a {
background-position:-80px -56px;
}
li#n-contact a {
background-position:-80px -84px;
}