如何将+号下拉菜单内的隐藏菜单项移至顶部导航栏单独成行展示

我有一个网站 https://www.totallifts.com.au/ ，当前其导航菜单可见，菜单中有一个+按钮用于收纳隐藏多余的菜单项，当前效果见下图：

我想要将这些隐藏的菜单项放到现有菜单下方新的一行展示，期望效果如下：

相关代码如下：

<ul id="top_menu" class="nav navbar-nav ml-auto text-right">
  <li class="nav-item  mm-mega-menu">....<li>
  <li class="nav-item  mm-mega-menu">....</li>
  <li class="nav-item  mm-mega-menu">....<li>
  <li class="nav-item  mm-mega-menu">....</li>
  <li class="nav-item  mm-mega-menu">....<li>
  <li class="nav-item  mm-mega-menu">....</li>
  <li class="nav-item  mm-mega-menu">....<li>
  <li class="nav-item dropdown o_extra_menu_items">
    <a role="button" href="#" class="nav-link dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-plus"></i></a>
    <ul class="dropdown-menu">
      <li class="mm-mega-menu">Vacuum & Pneumatics<li>
      <li class="mm-mega-menu">Industrial Towing<li>
    </ul>
  </li>
</ul>

我已经尝试过以下写法：

$(".dropdown-menu").appendTo("#top_menu");

但执行后所有菜单都被隐藏到了+按钮下方；之后我又尝试了：

$("#top_menu").appendTo(".dropdown-menu");

执行后完整菜单无法正常展示。

解决方案 #

你之前的写法错误在于直接移动了整个下拉菜单容器，没有单独提取菜单项，也没有补全导航所需的样式类，同时没有清理冗余的+按钮容器。正确实现代码如下：

// 提取下拉菜单内的所有菜单项，添加导航项样式类后追加到顶部菜单末尾
$('.dropdown-menu li').addClass('nav-item').appendTo('#top_menu');
// 移除已经没用的+按钮下拉容器
$('.o_extra_menu_items').remove();

如果需要新增的菜单项自动换行成单独一行，可添加如下CSS：

#top_menu {
  flex-wrap: wrap;
  width: 100%;
}

如果仅需要在桌面端生效，将上述CSS放到对应宽度的媒体查询中即可。

内容的提问来源于stack exchange，提问作者user3162878