下拉菜单和 PageTransitions 之间的可见性冲突

Question

我有两种似乎相互冲突的能力。当我移除另一个时，每个都可以完美运行。第一个功能是一排下拉菜单。就在下面，我正在实现PageTransitions 库。我的问题是，当它出现时，我的下拉菜单不再出现。这是一个屏幕截图：

当我注释掉过渡库时，下拉菜单功能完美。当我用普通的旧<div> 替换并给它一个背景颜色时，我可以看到下拉菜单。我浏览了该库，并确定了 z-index 值出现的位置。库中的最高 z-index 值为 999999，因此我将下拉菜单的 z-index 设为 1000000。仍然没有。

在 pt-page（第 12 行）、pt-page-1（第 76 行）和 pt-page-current（第 31 行）类中描述了阻止下拉菜单的 div。我尝试删除对背面可见性的任何引用，但这并没有改变。这些是从这个文件中摘录的类：

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

这是我的 html 文件中的相关代码：

    <div id="innerframe">
        <div id="dropdown">
        <ul class="navigation">

            <li><a href="#">Workout Builder</a></li>

            <li><a href="#">Send Email</a></li>

            <li><a href="#">Building Blocks</a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>           
                <div class="clear"></div>
            </li>

            <li><a href="#">Other Capabilities</a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
                <div class="clear"></div>
            </li>

            <li><a href="#">Help</a></li>

            <li><a href="#">Log Out</a></li>

        </ul> <!--navigation-->
        <div class="clear"></div>
    </div> <!--dropdown-->

        <div class="pt-triggers">
            <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
            <div id="dl-menu" class="dl-menuwrapper">
            </div>
    <!-- /dl-menu-wrapper-->
    </div><!-- /triggers -->

        <div id="pt-main" class="pt-perspective">
            <div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
        </div>

    </div> <!--innerframe-->

还有导航类的css：

/* Adjusting the margins, paddings and no list styles */
.navigation  {
    margin:0; 
    padding:0; 
    list-style:none;
    height:36px;
    z-index:1000000;
}   

/* Little tricking with positions */
.navigation  li {
    float:left;         /* Show list items inline */
    width:200px; 
    position:relative; 
}

/* Playing with Main Categories */
.navigation  li a {
    background:#262626; 
    color:#aaaaaa;
    display:block;      /* Making sure a element covers whole li area */
    padding:8px 7px 8px 7px; 
    text-decoration:none; /* No underline */
    border-top:1px solid #73bf00;
    text-align:center; 
    text-transform:uppercase;
}

.navigation  li a:hover {
    color:#73bf00;
}

/* Sub Cat Menu stuff*/
.navigation  ul {
    position:absolute; 
    left:0; 
    display:none; /* Hide it by default */
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none;
    border-bottom:3px solid #73bf00;
}

.navigation  ul li {
    width:200px; 
    float:left; 
    border-top:none;
}

/* Sub Cat menu link properties */
.navigation  ul a {
    display:block;      /* Making sure a element covers whole li area */
    height:15px;
    padding:8px 7px 13px 7px; 
    color:#aaaaaa;
    text-decoration:none;   
    border-top:none;
    border-bottom:1px dashed #000000;
}

.navigation  ul a:hover {
    color:#73bf00;
}

对不起所有的代码。我无法确定是哪些线路导致了问题。感谢任何可能查看此内容的人。对此，我真的非常感激。我不知道还能去哪里。

Answer 1

如果您的下拉菜单隐藏在主要内容 div 后面，指定 z-index 可以将它们带到顶部。

请记住，为了在元素上使用z-index，您还需要将定位设置为position: relative。

尝试将position: relative 添加到您的.navigation 课程中。