html - z-index 无法正常工作

Question

我正在尝试创建“加入 DIV 效果”。有两个div，一个div重叠在另一个上，隐藏底部的顶部边框div并创建效果：

想要的效果：

问题：

关联

我有一个 Div 和一个 ul，第一个具有“下拉切换”类（第 90 行），第二个 ul（第 98 行）具有“子下拉”类。（样式来自第 247-287 行）

我想在子下拉列表 ul 上重叠下拉切换 div

提前致谢

HTML 代码：

<div class="offset3 span3 head-right">
                <ul>
                    <li>
                        <div class="dropdown-toggle"> <!-- referring div -->
                            <div class="toggle-drop">
                                <div class="uk-flag">&nbsp;</div>
                                <div class="value"> English</div>
                                <div class="dropdown-arrow">&nbsp;</div>
                            </div>
                            &nbsp;
                        </div>
                        <ul class="sub-dropdown">
                            <li class="german-flag"><a href="#">German</a></li>
                            <li class="french-flag"><a href="#">French</a></li>
                            <li class="indian-flag"><a href="#">Hindi</a></li>
                        </ul>
                    </li>
                </ul>           
            </div>      

CSS 代码：

.dropdown-toggle div{
    float: left;
 }
.dropdown-toggle .toggle-drop{
    z-index: 30000;
 }
 li:hover .dropdown-toggle .toggle-drop{
   box-shadow: 0px 0px 1px;
}
.dropdown-arrow{
   background: url(../img/dropdown-arrow.png) no-repeat center;
   padding-left: 15px;
   opacity: 0.4;
   filter:alpha(opacity=40); /*For IE8 and earlier */
}
li:hover .dropdown-toggle .dropdown-arrow{
opacity: 1.0;
filter:alpha(opacity=100); /*For IE8 and earlier */
}
.sub-dropdown{
    display: block;

    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    z-index: 10;

    background: #ffffff;
    position: absolute;
    margin-top: -2px;
    padding: 5px;
    padding-right: 40px;
    background-color: #fff;
    box-shadow: 0px 0px 1px;
}
 li:hover ul.sub-dropdown{
    opacity: 1;
    visibility: visible;
    overflow: visible;
}