导航被页面中的锚标记中断

Question

我的子菜单导航有问题，希望有人能帮助我。导航似乎在所有页面上都正常工作，除了 'Programs'，它看起来是透明的，当我将鼠标悬停在页面中的锚标记上时，导航子菜单消失了。

nav is working fine nav is messed up

我不确定是什么原因造成的。我的第一个坚持说它一定是与 z-index 相关的东西，但我尝试应用不同的 z-index 并且它似乎没有影响任何东西。我也觉得很奇怪，它只影响一页。

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

 <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;
}

这里是程序页面的重生css：

.program_info a{
    text-decoration:none;
    color:black;
}

.program_info{
    float:left;
}

.program_info_box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


.program_info p {
    font-size:1em;
    padding:10px;
    font-weight:600;
}

.program_info:hover img {
  transform: scale(1.2);
}

.program_image{
    text-align: center;
    overflow: hidden;
}


.program_title p {
    font-size:16px;
    text-align: center;
}

#program_info_page .program_image img {
    height:300px;
    width:100%;
    object-fit:cover;
}

#program_info_page .program_image {
    overflow:hidden;
    object-fit:cover;
}

我真的希望有人能帮我解决这个问题！

谢谢，贝琪

Answer 1

您的导航存在 z-index 问题。只需添加此 CSS，您的导航就会开始正常工作。

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

您的 z-index 背后的原因可能是您现有的样式与当前样式重叠。

导航被页面中的锚标记中断

Navigation being inturrupted by anchor tag in page

html

css

php

navigation

wordpress