html - overlapping of two select boxes -

html - overlapping of two select boxes -

i have 2 select boxes in html, 1 below other.

the first select box normal the sec selectbox default opened(means options displayed without click)

now when click on first select box it's content moves behind other select box.

html

<form> <li> <label class="labelwid" for="partner">select partner*</label> <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="width:275px !important"> <option value="{partnerno}">{partnername}</option> </select> </li> <li> <div class="fl"><b>market application</b><br /> <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input selectbox" style="width:230px !important"> {categoryname_html_m} </select> </div> </li> </form>

custom select jquery plugin custom inputs.

css first select box

position:absolute; top:40px; padding:2px 0 5px 0; left:0; overflow-x:hidden; overflow-y:auto; z-index:1000; background:#fff; border:1px solid #d1cdcd; border-top:none; font-size:15px; width:265px; left:4px; height:100px;

z-indexes compared on same level, means 2 elements different parents z-indexed in relation parent's z-indexes, here's illustration http://jsfiddle.net/pavloschris/5tlrz/. when encounter kind of problems because of that.

html css