下拉菜单选项被容器遮挡问题求助

问题说明 #

下拉菜单（dropdown）的选项被容器遮挡，附上相关HTML和CSS代码，寻求针对性解决方法。

HTML代码 #

<div class="col-lg-4 col-md-6 col-12"  >
    <div class="single-schedule " style="height: 410px;">
        <div class="inner">
            <div class="icon">
                <i class="icofont-prescription"></i>
            </div>
            <div class="single-content">
                <h4>Find A Doctor</h4>
                <div class="form-group has-search">
                    <span class="fa fa-search form-control-feedback" style="color: black;"></span>
                    <input type="text" class="form-control input-sm" placeholder="Search">
                </div>
                <div>
                    <h4>Doctors</h4>
                </div>
                <select class="small-dropdown">
                    <option value="volvo">Ahmed</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Ali</option>
                    <option value="audi">ali</option>
                </select>                                                                
                <div>
                    <h4>Specialities</h4>
            
                </div>                                  
                <select class="small-dropdown">
                    <option value="volvo">Neurology</option>
                    <option value="saab">Ent</option>
                    <option value="fiat">Phsycology</option>
                    <option value="audi">Brain</option>
                </select>
                <div class="row">
                    <div class="col">
                         <a href="##" id="submitButton" onclick="showLoader()">Submit</a>
                    </div>                                  
                    <div class="col"> <a href="All_Doctors.html">See All Doctors<i class="fa fa-angle-right"></i></a>
                    </div>
                </div>      
                <span class="loaderr"></span>
                                                    
            </div>
        </div>
    </div>
</div>

CSS代码 #

.schedule {
    background: #fff;
    margin: 0;
    padding: 0;
    height: 230px;
}
.schedule .schedule-inner {
    position: relative;
    transform: translateY(-30%);
    z-index:9;
}
.schedule .single-schedule {
    position: relative;
    text-align: left;
    z-index:3;
    border-radius:5px;
    background:#C31A0A;
     -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule .inner {
    overflow:hidden;
    position: relative;
    padding:30px;
    z-index:2;
}
.schedule .single-schedule:before{
    position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#C31A0A;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule:hover:before{
    opacity: 0.8;
}
.schedule .single-schedule:hover{
    transform: translateY(-5px);
}

解决方案 #

问题根源在于.schedule .single-schedule .inner容器设置了overflow:hidden，下拉菜单展开后选项超出容器范围会被截断隐藏。

解决步骤：

1. 修改.inner的overflow属性，将overflow:hidden替换为overflow:visible，或者直接移除该属性：

.schedule .single-schedule .inner {
    /* 移除 overflow:hidden，或改为 overflow:visible */
    position: relative;
    padding:30px;
    z-index:2;
}

2. 若担心容器内其他元素溢出，可单独为特定元素设置溢出规则，不要给整个.inner容器加overflow:hidden。
3. 如果使用的是自定义下拉组件而非原生<select>，需确保下拉菜单的z-index值足够高，避免被其他元素覆盖。

内容的提问来源于stack exchange，提问作者Zahab Abbas