Drop menu misbehaving. Possibly z-index? - html

Question

I have two drop menus. the "choose a state" menu and "select a carrier" menu. Here's the thing: I want my drop menus to behave like my "state" menu, in that it moves content below it downwards. However, I want them to look like my "carrier" menu, in that it looks like two separate menus when you click on it. Here is my fiddle for code reference: http://jsfiddle.net/SteveSerrano/rc7fhhhu/
Note: The only difference between the two menus is that "state" is positioned "relative" with a z-index of 9999. "carrier" is positioned "absolute" with a z-index of 9999. I'm lost. Need any help. Thanks :)
<div class="state_box">
<input type="checkbox" id="state-tgl" onblur="closeMenu(this)">
<label id="state-tgl-label" for="state-tgl">
<span class="collapse_tiny">Choose a state</span>
<span class="collapse expand_tiny inline">State</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul id="state_drop-menu">
<li><span class="collapse_tiny">Connecticut</span></li>
<li><span class="collapse_tiny">New Hampshire</span></li>
<li><span class="collapse_tiny">New Jersey</span></li>
<li><span class="collapse_tiny">New York</span></li>
</ul>
<div class="carrier_box">
<input type="checkbox" id="carrier-tgl" onblur="closeMenu(this)">
<label id="carrier-tgl-label" for="carrier-tgl">
<span class="collapse_tiny">Select a carrier</span>
<span class="collapse expand_tiny inline">State</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul id="carrier_drop-menu">
<li><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span></li>
<li><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span></li>
<li><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span></li>
<li><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span></li>
</ul>
CSS CODE:
.state_box{
margin-bottom:-9px;
background-color:rgba(6, 0, 0, 0.09);
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
width:160px;
}
.state_box ul{
margin:0;
padding:0;
list-style-type: none;
}
.state_box ul li{
display:inline;
}
.state_box ul ul{
display:inline;
}
.state_box ul li a{
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px; font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.state_box ul li a.first_state{
padding-left:0px;
}
.state_box ul li .third_level{
color:#a7a9ac;
font-size:18px; font-size:1.8rem;
vertical-align:-5px;
}
.state_box ul li .fourth_level{
color:#BCBEC0;
font-size:14px; font-size:1.4rem;
vertical-align:-3px;
}
.state_box ul li a:hover{
color:#808285;
}
.state_box ul li .selected_state{
font-size:36px; font-size:3.6rem
color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#state-tgl{
position:absolute;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#state-tgl-label{
font-size:28px; font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#state-tgl-label img{
float:right;
margin-top:5px;
}
#state_drop-menu{
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:200px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-left:-10px;
margin-top:10px;
}
#state_drop-menu li{
display:block;
padding:0px;
margin:0px;
width:100%;
}
#state_drop-menu li a{
font-size:36px; font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#state_drop-menu li a:hover{
color:white;
background-color:black;
}
#state-tgl:checked ~ #state_drop-menu{
display:block;
max-height:1000px;
}
/*########### Carrier Drop Menu ############*/
.carrier_box{
margin-bottom:-9px;
background-color:rgba(6, 0, 0, 0.09);
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
width:320px;
}
.carrier_box ul{
margin:0;
padding:0;
list-style-type: none;
}
.carrier_box ul li{
display:inline;
}
.carrier_box ul ul{
display:inline;
}
.carrier_box ul li a{
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px; font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.carrier_box ul li a.first_carrier{
padding-left:0px;
}
.carrier_box ul li .third_level{
color:#a7a9ac;
font-size:18px; font-size:1.8rem;
vertical-align:-5px;
}
.carrier_box ul li .fourth_level{
color:#BCBEC0;
font-size:14px; font-size:1.4rem;
vertical-align:-3px;
}
.carrier_box ul li a:hover{
color:#808285;
}
.carrier_box ul li .selected_carrier{
font-size:36px; font-size:3.6rem
color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#carrier-tgl{
position:absolute;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#carrier-tgl-label{
font-size:28px; font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#carrier-tgl-label img{
float:right;
margin-top:5px;
}
#carrier_drop-menu{
position:absolute;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-left:-10px;
margin-top:10px;
}
#carrier_drop-menu li{
display:block;
padding:0px;
margin:0px;
width:100%;
}
#carrier_drop-menu li a{
font-size:36px; font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#carrier_drop-menu li a:hover{
color:white;
background-color:black;
}
#carrier-tgl:checked ~ #carrier_drop-menu{
display:block;
max-height:1000px;
}
#charts{
margin-top:50px;
}

Answer 1

This should be a good start: move your background-color from .state-box and move it onto:
#state-tgl-label {
background-color:rgba(6, 0, 0, 0.09);
}
That way only the label gets the background color, and not the whole surrounding div. The reason you need to keep position: relative is that using position: absolute takes it out of the flow of the document, which prevents your desired effect of moving the other elements of the page down when opened.
Here's a quick fiddle: http://jsfiddle.net/rc7fhhhu/1/
updated fiddle: http://jsfiddle.net/rc7fhhhu/2/
I've removed margin-left: -10px from the ul element, and moved the padding onto the #state-tgl-label element. Should be pretty close to what you were looking for.