title: CSS - opacity background, eveything inside had opacity also
body: <p>I have this site here:</p>
  
  <p><a href="http://artendijen.com/susan_dev/" rel="nofollow">http://artendijen.com/susan_dev/</a></p>
  
  <p>and I have a navigation box with an opacity and everything inside the navigation box has a opacity also, how do I fix this? I am using Chrome on Windows 7 if that makes any difference.</p>
  
  <pre><code>.navigation{
      float:left;
      height:550px;
      width:300px;
      background:#000;
      margin-left:-6px;
      margin-top:100px;
      opacity:0.6;
      filter:alpha(opacity=60);
      border-radius: 0 10px 10px 0;
      box-shadow: 5px 0px 3px rgba(0,0,0,.5);
  }
  
  .navigation ul{
      list-style:none;
      padding-top:20px;
  }
  
  .navigation ul li{
      padding-bottom:20px;
  }
  
  .navigation ul li a{
      font-size:18px;
      text-decoration:none;
      color:#FFF;
      text-transform:uppercase;
      font-family:'Conv_Museo300-Regular';
  }
  
  
  .logo{
      text-align:center;
      padding-top:10px;
  }
  </code></pre>