opacity of list within opaque div

I am having a problem where my list is becoming opaque because it is in an opaque div. how can I stop this from happening?

here is my code:

html:
<div id="menubar">
<div style="float:right;" >
<ul class="menulist">

<li><a href="lifestyle.html">lifestyle</a></li>
<li>Store Locator</li>
<li>collections</li>
<li>Buyer's Login</li>
<li>Trade Shows</li>
<li>Media inquiries</li>
<li>Contact</li>
</ul>
</div>

</div>

css:

#menubar {background:#000; filter:alpha(opacity=50); -moz-opacity:0.5;
-khtml-opacity: 0.5;opacity: 0.5; height:25px; min-width:980px; padding-right:20px;}


.menulist li {font-family:Arial, Helvetica, sans-serif; font-size:12px; display:inline; color:#FFF; padding-right:15px; padding-top:5px; text-transform: uppercase;}

.menulist li a {color:#FFF; text-decoration:none;}
.menulist li a:hover {color:#CCC;}

Some quick googling reveals I should just be using posotion relative to put it on top. Works well for me. Sorry!