Question

enter image description here

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

上

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

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

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

Answer 2

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

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

2 个答案: