CODEWITHSUNDEEP
htmlcssdrop-down-menu
ReshaD
ReshaD

Reputation: 946

Dropdown menu opens behind the next <div>

This is my question about the dropdown menu which open behind the div.

Here is my HTML code:

 <div style="position:relative; left:0px; top:0px;">

     <div style="background-color: white; width: 100%;">
              <div class="styled-select">
                     <select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;" style="z-index:99999">
                        <option value="1">First</option>
                        <option value="2">Second</option>
                        <option value="3">Third</option>
                        <option value="4">Fourth</option>
                        <option value="5">Fifth</option>
                        <option value="6">Sixth</option>
                        <option value="7">Seventh</option>
                        <option value="8">Eighth</option>
                        <option value="9">Ninth</option>
                        <option value="10">Tenth</option>
                    </select>
              </div>

              <div style="background-color: grey; width: 100%; height:400px; left: 0px; ">
                    <div style="width: 944px;  margin: 0 auto; ">
                         <font style="font-size: 22px; font-weight: bold; ">
                            <span id="spanMOV" style="cursor: pointer; color: #4F9DD0; text-decoration: underline; " >
                                Movies
                            </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span id="spanGAM" style="cursor: pointer;" >
                                Games
                            </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span id="spanRES" style="cursor: pointer;" >
                                Restaurant
                            </span>
                    </div>
              </div>
     </div>
</div>

And this is my CSS code:

<style type="text/css">
    .styled-select select {
        position: absolute;
        background: transparent;
        width: 944px;
        padding: 5px;
        font-size: 32px;
        font-weight: bold; 
        font-family: 'PT Sans', sans-serif;
        color: #4F9DD0;
        line-height: 1;
        border: 0;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
    }
    .styled-select {
        overflow: hidden;
        background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
        background-color: white;
        width: 944px; 
        height: 48px;
        position: relative;  
        margin: 0 auto;
    }

The problem is that, whenever I click on the select dropdown, it opens behind the <div> after that. I had tried z-index but it did not work.

Upvotes: 0

Views: 93

Answers (2)

RJParikh
RJParikh

Reputation: 4166

Try after removing position:relative.

.styled-select {
    overflow: hidden;
    background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
    background-color: white;
    width: 944px; 
    height: 48px;
    /*position: relative;  */
    margin: 0 auto;
}

OR

.styled-select {
    /*overflow: hidden;*/
    background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
    background-color: white;
    width: 944px; 
    height: 48px;
    position: relative;  
    margin: 0 auto;
}

Its works for me.

Upvotes: 1

Frederik Witte
Frederik Witte

Reputation: 1345

Remove the overflow: hidden; from .styled-select and it shows up infront of it. If you want it to have a white background then, you need to change background: transparent on .styled-select select to background: white.

Upvotes: 1

Related Questions