【发布时间】：2020-09-03 07:58:50
【问题描述】：
我正在尝试将导航菜单移至 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>
非常感谢您的任何意见！
【问题讨论】：