Understrap 主题子菜单看起来很奇怪答案

【问题标题】：Understrap Theme Sub-Menu Looks OddUnderstrap 主题子菜单看起来很奇怪
【发布时间】：2021-07-09 01:53:07
【问题描述】：

我在我的 Wordpress 网站上使用 Understrap 主题并尝试实现子菜单（这里是www.irricad.com，“支持”菜单中的“视频”条目）。

如您所见，子菜单位于主菜单的顶部，遮挡了一些条目并妨碍了正确导航。我希望它像“正确”子菜单一样显示在右侧（最好有指示子菜单的小箭头）。

子菜单与主菜单项具有相同的类，所以我不知道如何使其显示不同。我需要一些额外的 CSS 吗？我在后端的菜单配置中有什么遗漏吗？如果没有不同的类，是什么让 Wordpress 知道这是一个子菜单，而不是嵌套级别？

【问题讨论】：

【解决方案1】：

我想通了。我将主题标题菜单深度更改为 3：

<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
    array(
      'theme_location'  => 'primary',
      'container'       => 'div',
      'container_class' => 'collapse navbar-collapse',
      'container_id'    => 'navbarNavDropdown',
      'menu_class'      => 'navbar-nav ml-auto',
      'fallback_cb'     => 'Understrap_WP_Bootstrap_Navwalker::fallback',
      'menu_id'         => 'main-menu',
      'depth'           => 3,
      'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
    )
  ); ?>

我将我的 navwalker.php 更改为这个（为有孩子的孩子添加切换样式）：

// If item has_children add atts to <a>.
if (isset($args - > has_children) && $args - > has_children && 0 === $depth && $args - > depth !== 1) {
  $atts['href'] = '#';
  $atts['data-toggle'] = 'dropdown';
  $atts['aria-haspopup'] = 'true';
  $atts['aria-expanded'] = 'false';
  $atts['class'] = 'dropdown-toggle nav-link';
  $atts['id'] = 'menu-item-dropdown-'.$item - > ID;
} else {
  $atts['href'] = !empty($item - > url) ? $item - > url : '#';
  // Items in dropdowns use .dropdown-item instead of .nav-link.
  if ($depth > 0) {
    if ($args - > has_children) {
      $atts['class'] = 'dropdown-toggle';
    } else {
      $atts['class'] = 'dropdown-item';
    }
  } else {
    $atts['class'] = 'nav-link';
  }
}

最后添加了这个样式来定位子菜单：

    .navbar-expand-md .navbar-nav ul.dropdown-menu> li > ul.dropdown-menu {
        position: absolute;
        top:0px;
        border-radius: 0;
        left: 100%;
        padding-top:0;
        padding-bottom:0;
        min-width: 150px;
    }

【讨论】：