help required with Class="selected" on nav bar

hi, on my site: http://vila.slicedcreative.co.uk/gallery.html
I have added a new class "Selected" to the Gallery button but it is all out of place and now has a new hover style on it which moves it down?!
please can someone help me?

html

<div id="navbar">
<ul id="menu">
<li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
<li><span></span><a href="#" title="The Area">The Area</a></li>
<li><span></span><a href="#" title="The Property">The Property</a></li>
<li class="selected"><span></span><a href="gallery.html" title="Gallery">Gallery</a></li>
<li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
<li><span></span><a href="#" title="Availability & Prices">Availability & Prices</a></li>
</ul>
<img src="/images/right_side_nav.png" alt="right side nav" class="nav_end" />
</div>


css

/** Menu **/
#navbar {
padding-left: 21px;
background-image: url(/images/left_side_nav.png);
background-repeat: no-repeat;
height:55px;
position: absolute;
top:54px;
left:220px;
width:689px;
}
.nav_end {
width: 21px;
height: 55px;
float: left;
}
ul#menu {
position:relative;
}
#menu li {
height: 55px;
float: left;
background-image: url(/images/1px_nav.png);
background-repeat: repeat-x;
display:block;
line-height: 52px;
}
#menu .selected {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}
#menu a:link,
#menu a:visited,
#menu a:active {
height: 55px;
padding: 2px 16px 0;
display: block;
font-weight: bold;
font-size: 13px;
color: #264a81;
text-decoration: none;
}
#menu a:hover {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}
#menu span{
background-image: url(/images/nav_divider.jpg);
height: 37px;
width:2px;
float:left;
margin-top: 9px;
position:absolute;
}

Hello jarv,
Your hover effect is still there, .selected doesn't shut it off.
When you apply .selected to your li, it makes the button look selected. Then, when you hover on your link, the background shows up a second time.

Works much better if you do it this way <div id="navbar">
<ul id="menu">
<li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
<li><span></span><a href="#" title="The Area">The Area</a></li>
<li><span></span><a href="#" title="The Property">The Property</a></li>
<li><span></span><a href="gallery.html" title="Gallery" class="selected">Gallery</a></li>
<li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
<li><span></span><a href="#" title="Availability &amp; Prices">Availability &amp; Prices</a></li>
</ul>

I was going to suggest that:

#menu .selected {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}

should be:

#menu .selected a {
margin: 7px 0 0;
line-height: 38px;
background: url(/images/1px_nav_on.jpg) repeat-x;
}

which is another way of saying the same thing...