I'm having trouble with selecting options on a selectbox when the select option is overlapping my menu. The menu I'm using is a jQuery Plugin.
When the select box overlaps the menu, the options are hidden. I tried adjusting the z-index of my div but it didn't solve the problem. Can someone assist me in resolving this issue? It's something new to me...
Here's a snippet of my HTML:
<div id="top-search">
<form nmae='name123' action="queryexecute.php" method="POST">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<select class="styledselect" name="field_2" style="width:100px;" autocomplete="on" placeholder="Show" required="">
<option value="">Select</option>
<option value="=">Equal</option>
<option value="!=">Not equal</option>
<option value="LIKE">Like</option>
<option value=">">Greater</option>
<option value="<">Lesser</option>
<option value=">=">Greater than or equal to</option>
<option value="<=">Lesser than or equal to</option>
<option value="!==">Not identical</option></select>
</select>
</td>
<td>
<select class="styledselect" name="field_1" id="field_1" style="width:100px;" autocomplete="on" placeholder="Show" required="">
<option value="">Select</option>
<option value="`ShibAzmnNo`">no</option>
</select>
</td>
<td>
<input name='' type="submit" src="images/shared/top_search_btn.gif" />
</td>
</tr>
</table>
</form>
</div>
And here's some CSS related to my issue:
#top-search {
display: inline;
float: right;
position: relative;
margin: 46px -150px 0 0;
z-index: 1;
}