html - 下拉菜单行为不端。可能是 z-index？

Question

我有两个下拉菜单。 “选择州”菜单和“选择运营商”菜单。事情是这样的:我希望我的下拉菜单表现得像我的“状态”菜单，因为它向下移动它下面的内容。但是，我希望它们看起来像我的“运营商”菜单，因为当您单击它时它看起来像两个单独的菜单。这是我的代码引用 fiddle :http://jsfiddle.net/SteveSerrano/rc7fhhhu/

注意:两个菜单之间的唯一区别是“state”定位为“relative”，z-index 为 9999。“carrier”定位为“absolute”，z-index 为 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 会将其从文档流中移除，这会阻止您移动其他元素的预期效果打开时页面向下。

这是一个快速的 fiddle :http://jsfiddle.net/rc7fhhhu/1/

---

更新 fiddle :http://jsfiddle.net/rc7fhhhu/2/

我从 ul 元素中删除了 margin-left: -10px，并将填充移动到 #state-tgl-label 元素。应该非常接近您要查找的内容。