Opacity CSS hjælp

Hej alle.

Roder lidt med opacity effekt i css, men har dog et problem.

Jeg har en baggrund der er sort med opacity:0.5; og derefter en ul/li oveni, men er de tikke muligt at få min ul/li til at være over den sorte baggrund?

Kan det være at det er pga. min ul/li er inde i min baggrundsdiv?
For at forklare det enkelt. Min ul/li ligger bag min sorte baggrund

Prøver at lave noget med webdesign optimering og håber da at det er muligt at lave dette uden at skulle bruge billeder eller andet

 <div id="wrapper">
     <div id="headerbg">
         <div id="headerlogo">
         </div>
         <div id="headerlogin">
         </div>
     </div>
     <div id="navbg">
         <ul id="ulnav">
             <li id="linav"><a href="#" class="nav">Home</a></li>
             <li id="linav"><a href="#" class="nav">Members</a></li>
             <li id="linav"><a href="#" class="nav">Matches</a></li>
             <li id="linav"><a href="#" class="nav">Forum</a></li>
             <li id="linav"><a href="#" class="nav">Servers</a></li>
             <li id="linav"><a href="#" class="nav">Partners</a></li>
             <li id="linav"><a href="#" class="nav">Files</a></li>
             <li id="linav"><a href="#" class="nav">Contact</a></li>
         </ul>
     </div>
 
 </div>

 @charset "utf-8";
 /* CSS Document */
 
 *{
       margin:0px;
       padding:0px;
 }
 
 body{
     background-image:url(../img/banjobg.jpg);
 }
 
 #wrapper{
     width:1000px;
     height:100%;
 }
 
 #headerbg{
     width:1000px;
     height:180px;
     background-color:#33F;
 }
 
 #headerlogo{
 }
 
 #headerlogin{
 }
 
 #navbg{
     width:1000px;
     height:63px;
     background-color:#000;
     opacity:0.5;
 }
 
 #ulnav{
     list-style-type:none;
 }
 
 #linav{
     float:left;
 }
 
 a.nav:LINK, a.nav:VISITED, a.nav:HOVER, a.nav:ACTIVE{
     display:block;
     font-family:Arial, Helvetica, sans-serif;
     font-size:18px;
     color:#FFF;
 }