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

Posted 2023-04-13

【中文标题】导航被页面中的锚标记中断

【英文标题】：Navigation being inturrupted by anchor tag in page

【发布时间】：2021-01-23 18:21:27

【问题描述】：

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

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']; ?>"  /> 
                    </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;

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

谢谢， 贝琪

【参考方案1】：

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

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

您的 z-index 无法正常工作的原因可能是您现有的样式与当前样式重叠。

【讨论】：

不用担心。享受:)