Question

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

enter image description here

当我注释掉过渡库时，下拉功能完美无缺。当我用普通的旧<div>替换并给它背景颜色时，我可以看到下降。我查看了库，并确定了z-index值出现的位置。库中最高的z-index值是999999，所以我给了我的下拉列表z-index为1000000.仍然没有。

阻止下拉列表的div在类pt-page（第12行），pt-page-1（第76行）和pt-page-current中的css file中有所描述（第31行）。我尝试取出任何对背面可见性的引用，但这没有改变。这些是此文件中的exerpted类：

.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班级。

Drop Down Menus和PageTransitions之间的可见性冲突

1 个答案: