Question

我的子菜单导航出现问题，希望有人可以帮助我。导航似乎在除“程序”之外的所有页面上都能正常工作，在该页面上它看起来是透明的，当我将鼠标悬停在页面的锚标记上时，导航子菜单消失了。

我不确定是什么原因引起的。我的第一个提示说它必须与z-index有关，但是我尝试应用不同的z-index，它似乎没有任何影响。我还认为只影响一页很奇怪。

这是一个wordpress网站。这是模板文件中的html和php代码：

Exception in thread "main" com.google.gson.JsonSyntaxException: 1589447438000
    at com.google.gson.internal.bind.DateTypeAdapter.deserializeToDate(DateTypeAdapter.java:87)
    at com.google.gson.internal.bind.DateTypeAdapter.read(DateTypeAdapter.java:75)
    at com.google.gson.internal.bind.DateTypeAdapter.read(DateTypeAdapter.java:46)
    at com.google.gson.internal.bind.ReflectiveTypeAdapterFactory$1.read(ReflectiveTypeAdapterFactory.java:131)
    at com.google.gson.internal.bind.ReflectiveTypeAdapterFactory$Adapter.read(ReflectiveTypeAdapterFactory.java:222)
    at com.google.gson.internal.bind.TypeAdapterRuntimeTypeWrapper.read(TypeAdapterRuntimeTypeWrapper.java:41)
    at com.google.gson.internal.bind.CollectionTypeAdapterFactory$Adapter.read(CollectionTypeAdapterFactory.java:82)
    at com.google.gson.internal.bind.CollectionTypeAdapterFactory$Adapter.read(CollectionTypeAdapterFactory.java:61)
    at com.google.gson.Gson.fromJson(Gson.java:927)
    at com.google.gson.Gson.fromJson(Gson.java:892)
    at com.google.gson.Gson.fromJson(Gson.java:841)
    at com.evry.integrator.tedbroker.utils.RestTest.transformToCRMRequest(RestTest.java:70)
    at com.evry.integrator.tedbroker.utils.RestTest.main(RestTest.java:82)
Caused by: java.text.ParseException: Failed to parse date ["1589447438000"]: Invalid time zone indicator '3'

这是导航的原始CSS：

 <main id="primary" class="site-main">
            <div class="margin-center">
        <?php if ( have_posts() ) : ?>

            <header class="page-header">
                <h1> Programs </h1>
                
                <?php
                the_archive_description( '<div class="archive-description">', '</div>' );
                ?>
            </header><!-- .page-header -->

            <?php
            /* Start the Loop */
            while ( have_posts() ) :
                the_post();

                /*
                 * Include the Post-Type-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                 */
                $image = get_field('program-image');
                ?>
                <div class="content_info program_info col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
                <a href="<?php the_permalink() ?>">
                

                <div class="program_info_box ">
                    <div class="program_image">
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 
                    </div> <!--.program_image ends -->
                <div class="program_title"> <p><?php the_title(); ?> </p> </div>

            </div> <!-- .white_box_blue ends-->
                </a>
                </div> <!--- .recruitment_info ends -->
                
            <?php endwhile;
                           
    ?> <div class="clearfix"></div> 
    <?php

        else :

            get_template_part( 'template-parts/content-none', 'none' );

        endif;
        ?>
            </div> <!--- .margin-center ends --->
    </main><!-- #main -->

这是程序页面的原始CSS：

.main-navigation {
    display: block;
    float:left;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 100%;
    left: -999em;
    display: block;
    background-color:white;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {

    left: auto;
}


.main-navigation ul ul a {
    width: 200px;
    border:none;
    z-index:90;
    position: absolute;
}


.main-navigation ul ul a:hover {
    border:none;
    color:#5bbda8;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

我真的希望有人能够帮助我！

谢谢，贝蒂

Answer 1

您的导航栏上有一个z-index问题。只需添加此CSS，您的导航即可开始正常工作。

header#masthead {
    position: relative !important;
    z-index: 99999 !important;
}

z索引不起作用的原因可能是您现有的样式与当前样式重叠。

页面中的定位标记破坏了导航

1 个答案: