优化后的标题：WordPress子菜单显示在主菜单项下方的布局调整方法

我试图创建一个下拉导航，其中父项在全屏上可见，然后单击父项时，子菜单从右侧滑入并覆盖整个屏幕。我已经设法做到了这一点，但是子菜单位于其他父菜单项的下面。

我尝试了z-index以及各种方法，但无法正常工作。请帮忙。

基本HTML设置：

我目前对Walker的上课太多了：

class PB_Walker_Nav_Menu extends Walker_Nav_Menu {
public function start_lvl( &$output,$depth = 0,$args = array() ) {
$output .= '

';
}
public function end_lvl( &$output,$args = array() ) {
$output .= '

我的菜单：

function header_menu() {
wp_nav_menu(
array(
'theme_location' => 'header-menu','menu' => '','container_class' => '','container_id' => '','menu_class' => 'head__nav_inner','menu_id' => '','echo' => true,'fallback_cb' => 'wp_page_menu','before' => '','after' => '','link_before' => '','link_after' => '','depth' => 0,'walker' => new Clean_Walker_Nav_Menu(),'container' => false,'items_wrap' => '

我的风格：

.nav-container {
background-color: base-colour(black);
position: absolute;
top: 80px;
left: 0;
height: 0;
width: 100vw;
transition: ease 0.4s;
display: flex;
flex-direction: column;
overflow-y: auto;
@include bp(min-width break(lg)) {
position: fixed;
top: 0;
overflow-y: hidden;
}
.menu-logo {
position: fixed;
top: 32px;
left: 64px;
z-index: 1000;
}
.head__nav {
background-color: base-colour(black);
position: relative;
top: 0;
height: 60%;
#primary-menu {
width: 50%;
position: absolute;
top: calc(50% + 21px);
left: 190px;
transform: translateY(-50%);
columns: 2;
li {
line-height: 2em;
a {
display: block;
}
.sub-menu {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
}
}


您可以在此处看到蓝色是主菜单，绿色是子菜单。子菜单包含2个链接，如您所见，位于主菜单链接的后面（右侧）。