Непрозрачность в меню, но не в списке

Question

Я собираюсь сделать это коротко, поэтому его легко понять.

Это сценарий:

• Я имею непрозрачность в меню (это работает)
• Я пытаюсь удалить непрозрачность из всплывающего окна (последнего Li, #myModal) (это не работает)

Некоторые из HTML в заголовке:

<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><a href="http://sookvisuals.com/dev/innbokskontroll/referanser/">referanser</a></li> 
     <li><a href="http://sookvisuals.com/dev/innbokskontroll/blogg">blogg</a></li> 
     <li class="popupp"><a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">bestill foredrag!</a> 
     <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">&times;</button> 
     </div><!-- End of Modal body --> 
     </div><!-- End of Modal content --> 
     </div><!-- End of Modal dialog --> 
     </div>  
     </li> 
    </ul> 
</div> 

Прошу прощения, если это грязный HTML. Я попытался сделать это простым, чтобы понять здесь на SO.

в настоящее время CSS, который добавляет непрозрачности меню выглядит следующим образом:

#header_menu { 
    opacity: 0.6; 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
} 

Чтобы удалить непрозрачности я попытался следующие, но это не работает:

#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 */ 
} 

Не могли бы вы помочь мне найти решение?

Answer 1

Вместо использования opacity попробуйте использовать rgba, как показано ниже.

#header_menu 
{ 
    background-color:rgba(0,0,0,0.7); 
} 

Так что это не повлияет на какие-либо дочерние элементы. Поэтому, где бы вы не хотели прозрачности, вы можете использовать его, как указано выше. Единственное, что вам нужно, чтобы дать ему формат rgb.