Problem with opacity

[jonesyb]

Hi,

I have just started experimenting with opacity in css.

Here is the address of the website in question:
http://djbenj.co.uk/78/

The problem is with the navigation part. I have set the background of it to be slightly transparent. However the text part needs to be completely opaque.

Can anyone help me at all?

Here is the CSS and HTML:


<div id="main_img">
<ul id="main_img_nav">

<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>




#main_img {
background: url(images/main_img.jpg);
height: 238px;
}

#main_img_nav {
margin: 0;
padding: 0;
list-style: none;
display: block;
height: 52px;
width: 753px;
background: #5c5c5c;
opacity: 0.4;
filter:alpha(opacity=40);
}
#main_img_nav li {
display: inline;
}
#main_img_nav a {
display: block;
height: 36px;
padding-top: 16px;
width: 120px;
text-decoration: none;
color: #fff;
float: left;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
letter-spacing: 1px;
font-weight: bold;
}

[jonesyb]

I have found a solution:
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

If anyone has any further comments though please feel free to say them.

Cheers,