z-index不能正常工作

Question

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

期望的效果：

问题：

Link

我有一个Div和一个ul，第一个带有“dropdown-toggle”类（第90行），第二个ul（第98行）带有“sub-dropdown”类。（样式来自第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;
}