WordPress自定义菜单(第三级嵌套问题） - WordPress Custom Menu (3rd Level Nesting Issue)

我在使用自定义WordPress菜单时遇到了一个问题，我似乎无法解决，所以在做了大量的网络搜索之后&在过去的几天里，由于未能解决这个问题，我决定看看StackOverflow上是否有人可以提供帮助。

请注意：我会使用Walker函数来实现这一点，但我现在对代码和设计工作方式太过熟悉了，我不得不以这种方式构建菜单。

我的下拉列表片段：http://pastebin.com/8Stfs90c（会发帖，但会把屏幕钉在十字架上）。

我的下拉菜单第三级出现问题。在此图像中：http://s13.postimg.org/lxhslt0lz/image.png您可以看到我突出显示了一个<li></li>（Pages、About Me、About Us）。结构如下

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)

这些都很好，但当它进入第三个下拉列表时，它会剪切<li>，留下其余的Pages子级，并将它们放入一个单独的容器中，而不是Pages的<li>。

所以它应该是这样工作的：

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)
    Right Sidebar (Parent: Pages)
    Left Sidebar (Parent: Pages)
    Our Process (Parent: Pages)

尽管它在下拉列表中看起来像这样（视觉上），但正如您在代码中看到的那样，它并不是由这个表示的。我想我遇到的问题是我为关闭</li>所做的检查是错误的。我已经遇到这个问题好几天了，我似乎无法解决它。我本来打算在基于WordPress的论坛上发布这个问题，但这更像是一个PHP错误。

下面是我在Pages中的元素上悬停的快速屏幕截图：http://s23.postimg.org/ef4ame6m3/image.png-如您所见，它们与<li>分离。

为了复制这一点，我只在WordPress中创建了一个菜单结构，并使用代码片段中的代码（基本上我只是将其粘贴到index.php文件中）来显示它是如何表示的。

我真的希望有人能帮上忙，因为在过去的几天里，这让我很生气，并对我的项目投入了大量精力。

很抱歉上面的链接，我会直接把它们发布在（截图和代码），但我不想从实际问题中拿走。

如果有人能为我提供解决方案，我会非常乐意给你买一两杯虚拟咖啡！

出于好奇，我可能没有抓住要点，有没有理由不想使用wp_nav_menu（）来处理所有这些？

如果在你的上下文中应用，下面的例子会为你输出正确的结构作为你的屏幕截图吗？

wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );

谢谢。

快速查看了代码，我想第100-130行处理的是第三个下拉列表。事实上，你已经在105线上有了一个ol，然后它又通过122线上的循环被调用了。

echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";

我认为问题出在第128行，你必须从末尾删除ol，并为此创造一个新的条件。

很抱歉，如果我没有任何帮助，但很难在脑海中想象整个代码而不看到它。如果你真的陷入困境，请在聊天中发送ftp详细信息，我可以看看。

Hi尝试这个css代码来创建多个嵌套菜单创建。

header.php 中菜单的WP代码

<nav class="photoshoot-menu">
   <?php wp_nav_menu(array('theme_location'  => 'primary','container' => ' ')); ?>
</nav>

CSS代码添加到您的样式中。

.photoshoot-menu {
  float: right;
  width: auto;
  padding-left: 0px;
  padding-right: 0px;
}
.photoshoot-menu ul {
  padding-left: 0px;
  margin: 0px;
}
.photoshoot-menu > ul li {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  margin: 3px 2px;
  position: relative;
}
.photoshoot-menu > ul > li > a {
  color: #212121;
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
  background-color: #343434;
  color: #f45c06;
}
.photoshoot-menu ul ul {
  border-radius: 4px;
  border: 1px solid #4f4f4f;
  background-color: rgba(38, 38, 38, 0.95);
  opacity: 0;
  position: absolute;
  top: 42px;
  width: 100%;
  min-width: 170px;
  z-index: 1;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}
.photoshoot-menu ul ul li {
  width: 100%;
}
.photoshoot-menu ul ul li a {
  display: inline-block;
  line-height: 16px;
  padding: 5px;
  color: #FFF;
  width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
  color: #f45c06;
}
.photoshoot-menu ul ul ul {
  left: 99%;
  top: 0px;
}

<nav class="photoshoot-menu">
  <ul class="menu" id="menu-all-pages">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2</a>
          <ul>
            <li><a href="#">Level 3</a>
              <ul>
                <li><a href="#">Lorem Ipsum</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Sample Page</a>
    </li>
  </ul>
</nav>