CSS z-index错误

Question

我很高兴感谢大家回答我的previous question！ 现在我差点完成垂直下拉菜单的问题。还有一个 它没有固定的bug，这里是：

在绝对定位的<div>中，我有另一个相对定位的，具有z-index定义。根<div>会破坏孩子的z-index定义，最后我们没有z-index效果。以下是代码示例：

HTML：

<div id="sub1" class="sub-menu">

                            <div class="sub-level">
                                <a href="./">Програмиране и езици dfs</a><br>
                                <a href="./">Бази данни</a><br>
                                <a href="./">Компютърни мрежи</a><br>
                                <a href="./">Интернет</a><br>
                                <a href="./">Web Design</a><br>
                                <a href="./">Операционни системи</a><br>
                                <a href="./">Компютърна графика</a><br>
                                <a href="./">Офис пакети</a><br>
                                <a href="./">CAD системи</a><br>
                            </div>
                        </div>

CSS：

div.sub:hover div.sub-menu, div.sub-menu:hover { 
            display: block; 
            width: 160px;
            position: absolute;
            border: 1px solid #c0c0c0; 
            border-top: none; 
            border-left: none;
            background-color: #ffffff;
            top: 0px;
            left: 190px;
        }

        div.sub-level {
            display: block;
            position: relative;
            z-index: 961;
            cursor: pointer;
            font-weight: normal;
            font-size: 11px;
            padding-left: 10px;
            width: 160px;
        }