html - 为什么下拉列表显示在div下面

Question

我有以下 ASP.net 代码，它是向用户显示的弹出窗口:

<div id="popupContact">
    <a id="popupContactClose" title="Close Window">x</a>
    <h3>Add a New Message</h3>
    <div id="dvFirst" class="mainSecond">
        <div id="leftdiv3" class="leftdiv">Client: </div>
        <div id="rightdiv3" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></div>
    </div>
    <div id="dvSecond" class="mainSecond">
        <div id="leftdiv4" class="leftdiv">Location: </div>
        <div id="rightdiv4" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvSixth" class="mainSecond">
        <div id="leftdiv6" class="leftdiv">Specialty: </div>
        <div id="rightdiv6" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlPraNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
   </div>
   <div id="dvThird" class="mainSecond">
        <div id="leftdiv5" class="leftdiv">Provider: </div>
        <div id="rightdiv5" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlProNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvFourth" class="mainFirst">
        <div id="leftdiv1" class="leftdivspec"><sup style="color: #FF0000; font-weight: bold;">*</sup>Message: </div>
        <div id="rightdiv1" class="rightdivspec"><asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></div>
    </div>
    <div id="dvFifth" class="mainSecond">
        <div id="leftdiv2" class="leftdiv">Active?</div>
        <div id="rightdiv2" class="rightdiv"><asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></div>
    </div>
    <div style="width: 96%; text-align: right; padding: 2%;">
        <asp:UpdatePanel runat="server" ID="upSubmit" ClientIDMode="Static" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btnSubmit" ClientIDMode="Static" UseSubmitBehavior="false" OnClick="SubmitAdminMessage" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

CSS:

.mainFirst
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 90px;
    border-bottom: 1px dotted #808080;
}
.mainSecond
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 30px;
    border-bottom: 1px dotted #808080;
    overflow: hidden;
}
.leftdiv
{
    width: 35%;
    height: 30px;
    float: left;
    font-weight: bold;
}
.rightdiv
{
    width: 65%;
    height: 30px;
    float: left;
}

本来弹窗加载的时候是这样显示的:

每当我从下拉列表中选择某项时，它就会进入其下方的 DIV 下:

如何修改 CSS，使每个 DropDownList 都出现在容器外部，从而显示选项？

Answer 1

可以尝试在容器类中加入“overflow:visible”