Question

我试图将导航菜单移至wordpress，但遇到了一个问题，即样式显示错误。将代码移至worpdress之后，标记将自动移至代码末尾，并对所有导航栏元素应用相同的样式。也许有人在这里有解决方案，或者看到我的代码出了什么问题？

这是我的菜单栏HTML代码：

<div class="nav-links">
    <?php 
        $menu_settings = [
            'menu_class' => 'dropdown',
            'container' => false,
            'theme_location' => 'primary-navigation',

        ];
        wp_nav_menu($menu_settings);
        ?>

    <ul class="dropdown">
        <li>Apie festivalį</li>
            <ul> 
                <li><a href="#">Naujienos</a></li>
                <li><a href="#">Apie festivalį</a></li>
                <li><a href="#">Programa</a></li>
                <li><a href="#">Partneriai</a></li>
                <li><a href="#">Organizatoriai</a></li>                           
            </ul>  
    </ul>

    <ul class="dropdown">
        <li>72 val. iššūkis</li>
            <ul>   
                <li><a href="#">Apie iššūkį</a></li>
                <li><a href="#">Taisyklės</a></li>
                <li><a href="#">Komandos registracija</a></li>
                <li><a href="#">Mentoriai ir komisija</a></li>
                <li><a href="#">Apdovanojimai</a></li>                           
            </ul> 
    </ul>
</div>

这是我将其移至Wordpress后的相同代码：

<div class="nav-links">
    <ul id="menu-main-menu" class="dropdown">
        <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="http://localhost/wp_odiseja/sample-page/">Apie festivali</a>
            <ul class="sub-menu">
                <li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://localhost/wp_odiseja/about-festivals/">Apie festivalį</a></li>
                <li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481"><a href="http://localhost/wp_odiseja/category/one-news/">Naujienos</a></li>
                <li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-657"><a href="http://localhost/wp_odiseja/programa/">Programa</a></li>
                <li id="menu-item-465" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-465"><a href="http://localhost/wp_odiseja/partners-page/">Partneriai</a></li>
                <li id="menu-item-466" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-466"><a href="http://localhost/wp_odiseja/organizers-page/">Organizatoriai</a></li>
            </ul>
        </li>
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-84"><a href="http://localhost/wp_odiseja/sample-page/">72 val. iššūkis</a>
            <ul class="sub-menu">
                <li id="menu-item-467" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-467"><a href="http://localhost/wp_odiseja/about-challenge-page/">Apie iššūkį</a></li>
                <li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://localhost/wp_odiseja/rules-page/">Taisyklės</a></li>
                <li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://localhost/wp_odiseja/mentors-page/">Mentoriai ir komisija</a></li>
                <li id="menu-item-704" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-704"><a target="_blank" rel="noopener noreferrer" href="#">Komandos registracija</a></li>
                <li id="menu-item-540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-540"><a href="#">Apdovanojimai</a></li>
            </ul>
        </li>
    </ul>
</div>

这也是我的导航菜单CSS代码：

// =========================
.nav-links{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
}
.dropdown{
width: 100%;
flex-direction: row;
justify-content: space-between;
display: flex;
}
.dropdown li {
  display: flex;
  border: 0;
  font-size: 16px;  
  font-family: 'Bebas Neue', Bold;
  text-transform: uppercase;
  color:rgb(245, 240, 175);
  width: 100%;
  // img{
  //   width: 20px;
  //   height: 20px;
  //   padding-right: 0.42%;
  // }
  }
.dropdown ul{
  border: none;
  display: none;
  position: absolute;
  background: rgba(25, 105, 95, 0.8);
  font-family: 'Bebas Neue', Bold;
  text-transform: uppercase;
  font-size: 17px;
  padding: 1.56% 1.82%;
}
.dropdown ul a {
  list-style: none;
  border-bottom: none;
  float: none;
  color: rgb(245, 240, 175);
  padding: 1.56% 1.82%;
  text-decoration: none;
  display: block;
  text-align: left;
}
//Menu hover--------------------------------------------------------------
 .nav-links:hover ul:hover li {
        border: none;
        border-bottom: 2px solid rgb(245, 240, 175);
      }
      .dropdown ul a:hover {
        border-bottom: none;
        background-color: rgb(25, 105, 95);
      }
      .dropdown:hover ul {
        display: block;
        width: 200px;
        border-bottom: none;
      }
     .nav-links:hover ul:hover  ul li{
        border-bottom: none;
      }

这是我的PHP，用于在wordpress上获取HTMl和CSS：

<div class="nav-links">
        <?php 
                $menu_settings = [
                    'menu_class' => 'dropdown',
                    'container' => false,
                    'theme_location' => 'primary-navigation',
                    // 'walker' => new custom_navwalker()
                ];
               wp_nav_menu($menu_settings);
            ?>
        </div>

非常感谢您的投入！

Answer 1

WordPress主题通常已经为导航菜单设置了样式，您还需要移动菜单的CSS样式代码，并将其添加到主题的自定义CSS中，以覆盖其外观。您有CSS代码吗？

WordPress导航菜单项未正确显示

1 个答案: