下拉菜单行为异常。 可能是z-index？

Question

我有两个下拉菜单。 “选择状态”菜单和“选择运营商”菜单。 事情是这样的：我希望下拉菜单的行为类似于“状态”菜单，因为它可以将其下方的内容向下移动。 但是，我希望它们看起来像我的“载体”菜单，因为当您单击它时，它看起来像两个单独的菜单。 这是我的提琴供参考： http : //jsfiddle.net/SteveSerrano/rc7fhhhu/

注意：这两个菜单之间的唯一区别是，“状态”位于“相对”位置，z索引为9999。“载波”位于“绝对”位置，z索引为9999。我迷路了。 需要帮助吗。 谢谢 ：）

<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><a href="http://www.pia.org/CT"><span class="collapse_tiny">Connecticut</span></a></li>
        <li><a href="http://www.pia.org/NH"><span class="collapse_tiny">New Hampshire</span></a></li>
        <li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">New Jersey</span></a></li>
        <li><a href="http://www.pia.org/NY"><span class="collapse_tiny">New York</span></a></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><a href="http://www.pia.org/CT"><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span></a></li>
        <li><a href="http://www.pia.org/NH"><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span></a></li>
        <li><a href="http://www.pia.org/NJ"><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span></a></li>
        <li><a href="http://www.pia.org/NY"><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span></a></li>
    </ul>

CSS代码：

.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

这应该是一个好的开始：将您的background-color从.state-box移至：

#state-tgl-label {
    background-color:rgba(6, 0, 0, 0.09);
}

这样，只有标签会获得背景颜色，而不是整个周围的div。 您需要保持position: relative的原因是，使用position: absolute会将其从文档流中移出，这会阻止您在打开页面时将页面的其他元素向下移动的预期效果。

这是一个简单的小提琴： http : //jsfiddle.net/rc7fhhhu/1/

---

更新小提琴 ： http : //jsfiddle.net/rc7fhhhu/2/

我已从ul元素中删除margin-left: -10px ，并将填充移到#state-tgl-label元素上。 应该非常接近您想要的东西。