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

【问题标题】：Select box option list overlaping on menu选择框选项列表在菜单上重叠
【发布时间】：2014-01-06 09:54:22
【问题描述】：

当点击选择框然后鼠标移到菜单上

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

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

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

CSS：

#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>

【问题讨论】：

我们可以看看一些代码吗？
如果您添加代码会更好，因为通过查看图像我们无法假设您的代码。
感谢您的回复。无法发布代码，但它的菜单很简单，我已经使用了 z-index 和 position relative 但不起作用。选择框隐藏而不是选项列表

标签： javascript jquery html css drop-down-menu

【解决方案1】：

尝试添加： "position:relative" 到菜单的父 div。

【讨论】：

至少显示一些带有示例文本的示例代码。我们无法想象您的结构。你在哪里申请了那个职位？

【解决方案2】：

尝试使用更高的 z-index 值。它可能会起作用。正如 Era 所说，你也可以使用相对位置，但如果你使用许多类似的东西，每次你都应该改变位置。

【讨论】：