Change background color in some links in a menu

I've a menu with 11 links.

I need to have the background color of 4 of these links a different color to the rest.. So they stand out. ( just made all links home for test)

<div id="menu">

<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>


</div>

here is the CSS i've controlling this.


#menu{
height:55px;
line-height:55px;
border-bottom:solid #282828 4px;
border-left:solid #ccc 1px;
border-right:solid #ccc 1px;
border-top:solid #ccc 1px;
text-transform:uppercase;
font-weight:bold;
background-color:#fff;
}

#menu a{
display: block;
float: left;
height:55px;
background-color:#fff;
padding:0px 12px 0 12px;
text-decoration:none;
color:#282828;}

#menu a:hover{background-color:#282828;
color:#fff;
}>

I was trying to add a class to the HREF but I couldn't get it to work. I assume i'm doing something wrong.

any tips would be great.
thanks.

I was trying to add a class to the HREF but I couldn't get it to work. I assume i'm doing something wrong.
<a href="#" class="other">Home</a>
<a href="#" class="other">Home</a>
#menu a.other{
background-color:#ccc;
}

Not sure what went wrong at your end as you haven't given code that doesn't work. Anyway, I guess you need to read the CSS specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).

thank you works perfect.