Javascript 在菜单上选择框选项列表重叠

单击“选择框”，然后将鼠标悬停在菜单上

在菜单上选择框选项列表重叠

我已经使用了z-index属性，但它不起作用

选择框隐藏但不选择选项列表。您可以使用任何现成的菜单，并将选择框放在菜单选项列表中始终显示的位置附近

CSS:

#导航{
位置：相对位置；
文本对齐：居中；
保证金：0自动；
背景色：#fff；
}
#导航李{
位置：相对位置；
列表样式：无；
显示：内联块；
填充：5px20px；
}
#导航李a{
填充物：5px；
显示：块；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
字体大小：14px；
字号：700；
颜色：#3b3b；
文本对齐：左对齐；
文本阴影：1px 1px 0 rgba（255255255,0.25）；
}
#导航李：悬停。主{
颜色：#ee4e1d；
}
#导航li.副导航包装器{
显示：块；
位置：绝对位置；
z指数：30；
左边距：-16px；
}
#导航li.sub-nav wrapper.sub-nav{
宽度：150px；
利润上限：4倍；
背景：#fff；
边框顶部：1px实心#fff；
盒影：0 1px2pRGBA（0,0,0,0.35）；
-莫兹盒阴影：0 1px2pRGBA（0,0,0,0.35）；
-网络工具包盒阴影：0 1px2pRGBA（0,0,0,0.35）；
}
#导航li:hover.sub导航包装器{
显示：块；
}
#导航李。副导航包装器。副导航李{
列表样式：无；
显示：块；
保证金：0；
填充：0；
文本对齐：左对齐；
边框底部：1px实心#d7d7；
}
#导航李。副导航包装器。副导航李：第一个孩子{
}
#导航李。副导航包装器。副导航李：最后一个子项{
边界：无；
}
#导航李。副导航包装器。副导航李a{
显示：块；
填充：11px 20px；
字体大小：12px；
字号：600；
文本阴影：1px 1px 0 rgba（255255255,1.0）；
盒影：插入0 0 2px rgba（255255255,1.0）；
-moz盒阴影：插入0 0 2px rgba（255255,1.0）；
-webkit盒阴影：插入0 0 2px rgba（255255,1.0）；
}
#导航李。副导航包装器。副导航李：悬停{
背景:#f5；
边框底部：1px实心#3b3b；
}
/*****末端下拉列表*****/
HTML:





























数据1
数据1

尝试添加：

“位置：相对位置”

---

转到菜单的父div。

尝试使用更高的z索引值。这可能有用。正如Era所说，u也可以使用相对位置，但是如果你使用许多类似的东西，每次你都应该改变位置

我们能看到一些代码吗？如果你添加代码会更好，因为通过看到图像我们不能假设你的代码。谢谢回复。无法发布代码，但它的简单菜单和我已经使用了z索引和相对位置，但不工作。选择框隐藏但不选择选项列表至少显示一些示例代码和示例文本。。我们无法想象你的结构。你在哪里申请那个职位的？

#navigation {
    position: relative;
    text-align:center;
    margin:0 auto;
    background-color:#fff;
}

#navigation li {
    position: relative;
    list-style: none;
    display: inline-block;
    padding: 5px 20px;
}

#navigation li a {
    padding: 5px;
    display: block;

    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #3b3b3b;
    text-align: left;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}

#navigation li:hover .main {
    color: #ee4e1d;
}

#navigation li .sub-nav-wrapper {
    display: block;
    position: absolute;
    z-index: 30;
    margin-left: -16px;
}

#navigation li .sub-nav-wrapper .sub-nav {
    width: 150px;
    margin-top: 4px;
    background: #fff;
    border-top: 1px solid #fff;

    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

#navigation li:hover .sub-nav-wrapper {
    display: block;
}

#navigation li .sub-nav-wrapper .sub-nav li {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid #d7d7d7;
}

#navigation li .sub-nav-wrapper .sub-nav li:first-child {
}

#navigation li .sub-nav-wrapper .sub-nav li:last-child {
    border: none;
}

#navigation li .sub-nav-wrapper .sub-nav li a {
    display: block;
    padding: 11px 20px;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 1px 1px 0 rgba(255,255,255,1.0);

    box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
    -moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
    -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}

#navigation li .sub-nav-wrapper .sub-nav li:hover {
    background: #f5f5f5;
    border-bottom: 1px solid #3b3b3b;
}

/*****END DROPDOWN*****/


HTML :
<ul id="navigation">
    <li>
        <a href="index.html" class="main">Home</a>
    </li>

    <li>
        <a href="#" class="main">Portfolio</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Graphics</a></li>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Content Writing</a></li>
        </ul></div>
    </li>

    <li>
      <a href="#" class="main">Technology</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Wordpress</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">Oracle</a></li>
        </ul></div>
    </li>

</ul>

<!-----END NAVIGATION----->
<div style="margin:0 auto;width:900px;text-align:center;">
<select name="search_type" id="search-type" >
                <option value="Data2">Data1</option>
                <option value="Data1">Data1</option>
                </select>
                </div>