Question

我有两个下拉菜单。＆＃34;选择一个州＆＃34;菜单和＆＃34;选择运营商＆＃34;菜单。事情就是这样：我希望我的下拉菜单表现得像我的状态＆＃34;菜单，因为它将内容向下移动。但是，我希望它们看起来像我的＆＃34;载体＆＃34;菜单，当你点击它时它看起来像两个单独的菜单。这是我的代码参考小提琴：http://jsfiddle.net/SteveSerrano/rc7fhhhu/

注意：两个菜单之间的唯一区别是＆＃34; state＆＃34;定位相对＆＃34; z指数为9999.＆＃34;载体＆＃34;定位＆＃34;绝对＆＃34; 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/

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

丢弃菜单行为不端。可能是z-index？

1 个答案: