Opacity in a menu, but not on a list - html

Question

I am going to make this short, so it's easy to understand.
This is the scenario:
I am having opacity in the menu (this works)
I am trying to remove the opacity from the popup (last li, #myModal) (this does not work)
Some of the html in the header:
<div id="header_menu">
<label for="show-menu" class="show-menu"><img src=<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/innbokskontroll_nav_menu.png height="15px"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>referanser</li>
<li>blogg</li>
<li class="popupp">bestill foredrag!
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div>
</li>
</ul>
</div>
I am sorry if this is a messy HTML. I tried to make it simple to understand here on SO.
The currently CSS which adds opacity to the menu is the following:
#header_menu {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
To remove the opacity I have tried the following, but it does not work:
#myModal {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.modal-content, .modal-dialog {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
text-align: left;
}
li.popupp {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Could you please help me to find the solution?

Answer 1

Instead of using opacity try to use rgba like below.
#header_menu
{
background-color:rgba(0,0,0,0.7);
}
So this will not affect any child elements. So wherever you want opacity you can use it like above. The only thing you need to give it rgb format.