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

Question

当点击选择框然后鼠标悬停在菜单上

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

我已经使用了 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>

Answer 1

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