I have a navigation bar with a semi-transparent background but the navigation links are also semi-transparent. How can I make it so my links do not become transparent? I have attached a copy of my code below (also available on JSFiddle.
<style type="text/css">
body{
margin:0;
padding:0;
}
a{
font-family:sans-serif;
font-size:15px;
}
#nav{
height:30px;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}
#right{
position:absolute;
top:0;
right:0;
}
.gbt{
display:inline-block;
line-height:26px;
}
.gbtc{
margin:0;
padding:0;
}
.gbts{
padding:6px;
}
</style>
<div id="nav">
<ol class=gbtc>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
</ol>
</div>
Any ideas are much appreciated and I hope you can understand what I'm trying to describe. The code I have provided is easier to see with a background image.
Thanks in advance, Callum