Opacity problem with sub div

[jasonxxx102]

So I basically have 2 divs and they are setup like this

<div id="header">
<div id="navbar">
</div>
</div>

This is the CSS for the header and navbar:

#header
{
padding: 0px;
opacity: 0.25;
background-color: #dcddd8;
height: 100px;
width: auto;
vertical-align: middle;
}
#navbar {
  width: auto;
  height: auto;
  border: 1px solid #b9121b;
  vertical-align: middle;
  background: #d74b4b;
  position: relative;
  top: 35px;
}

I want to know why all the content in my navbar is being affected by the opacity of the header. Can anyone help me fix this error. (I want the background of the header to be opaque but I want the navbar to retain its color)

[jasonxxx102]

Thank you!!

[Author]

Posts