jquery - 无法在菜单上的选择框中选择

Question

只有在我的菜单上选择选项时，我才在选择框上选择选项时遇到问题。我使用的菜单是一个插件 Jquery。

When the select box is over the menu the options is going back. 我尝试将 z-index 赋予我的 div，但它没有帮助我。有人可以帮我解决这个问题吗？对我来说这是一个新问题……

我的 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="&gt;">Greater</option> 
            <option value="&lt;">Lesser</option>
            <option value="&gt;=">Greater than or equal to</option> 
            <option value="&lt;=">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>

我的 CSS：

#top-search {
    display: inline;
    float: right;
    position: relative;
    margin: 46px -150px 0 0;
    z-index: 1;
    }

Answer 1

它的z-index问题你应该增加z-indexselect的父元素到menu的父元素

像

<div style="position:relative;z-index:9999">select item</div> 

<nav style="position:relative;z-index:99">menu items</nav> 

或者

#top-search{z-index:9999;}