I'm trying to make a menu using this gif imagethis image and and I cant get the second link to work at all. The "adventures" works but when I try to add in "places" it just starts ****ing up.

the html
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head><link rel="stylesheet" type="text/css" href="index.css"/>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Untitled Document</title>
</
head>

<
body>


<
div class="nav">
    <
h1 class="logo"><a id="logolink" href="#">Alexander May</a></h1>
    <
div class="menu">
        <
class="adventures"  href="#">adventures</a>
        <
span class="hidden"> | </span>
        <
class="places"  href="#">places</a>
        <
span class="hidden"> | </span>
        <
class="people"  href="#">people</a>
        <
span class="hidden"> | </span>
        <
class="dog"  href="#">dogdays</a>
        <
span class="hidden"> | </span>
        <
class="contact"  href="#">contact</a>

    </
div>




</
body>
</
html
the css
PHP Code:
@charset "utf-8";
/* CSS Document */

.nav {
    
position:absolute;
    
left:-2px;
    
top:22px;
    
width:220px;
    
height:42px;
    
overflow:hidden;
}

.
nav a:link,
.
nav a:visited,
.
nav a:active,
.
nav a:hover {
    
position:absolute;
    
left:0;
    
display:block;
    
overflow:hidden;
    
width:220px;
    
height:22px;
    
margin:0;
    
padding:22px 0 0 0;
    
background-color:#FFFFFF;
    
background-image:url("images/menu.gif");
    
background-repeat:no-repeat;
}
.
menu {
    
position:absolute;
    
left:-2px;
    
top:22px;
    
width:220px;
    
height:45px;
    
overflow:hidden;
}

.
menu a:link,
.
menu a:visited,
.
menu a:active,
.
menu a:hover {
    
position:absolute;
    
left:0;
    
display:block;
    
overflow:hidden;
    
width:220px;
    
height:45px;
    
margin:0;
    
padding:22px 0 0 0;
    
background-color:#FFFFFF;
    
background-image:url("images/menu.gif");
    
background-repeat:no-repeat;
}

h1.logo {
    
position:relative;
    
left:-2px;
    
width:220px;
    
height:20px;
    
overflow:hidden;
    
margin:0 0 10px 0;
}
a.logolink:link,
a.logolink:visited,
a.logolink:active,
a.logolink:hover {
    
display:block;
    
width:200px;
    
height:20px;
    
margin:0;
    
padding:24px 0 0 0;
    
background-color:#FFFFFF;
    
background-image:url("images/menu.gif");
    
background-repeat:no-repeat;
    
background-position:-110px;
}
a.logolink:hover {
    
background-position:-110px;
}
a.adventures:link,
a.adventures:visited,
a.adventures:active,
a.adventures:hover {
    
top:0;
    
background-position:-26px;
}
a.adventures:hover,
a.adventures.on {
    
background-position:-185px;