WordPress下拉CSS不起作用答案

【问题标题】：Wordpress Dropdown CSS not workingWordPress下拉CSS不起作用
【发布时间】：2013-10-04 11:37:16
【问题描述】：

我正在创建自己的 wordpress 模板，并且编写了一个静态工作的 jQuery 下拉菜单，但现在我正试图使其动态化，但 css 搞砸了。下拉菜单有效，但菜单显示不正确。

主菜单显示垂直而不是水平，二级菜单是水平而不是垂直。主菜单的橙色类型也不显示。

这是一个有效的static version

我希望我能彻底解释自己，如果您需要更多信息，请告诉我。

这是我的wordpress模板代码

<div class="box">
    <ul id="ldd_menu" class="ldd_menu">
        <li>
            <span>Menu</span>
            <!-- Increases to 510px in width-->
            <div class="sub_wrap">
                <div class="ldd_submenu">
                    <nav>
                        <li class="ldd_heading"></li>
                        <?php wp_nav_menu(array('menu' => 'main_nav')); ?>
                    </nav>
                    <a class="ldd_subfoot" href="#"> Accessibility Link</a>
                </div>
           </li>
      </ul>
  </div>
  <div></div>

【问题讨论】：

您的子菜单缺少新的<ul>，应该是<nav><ul><li>
您的 HTML 格式不正确。您的 div 类 sub_wrap 未正确关闭。

标签： css wordpress drop-down-menu

【解决方案1】：

我怀疑您的代码没有处理 wp_nav_menu 方法的输出格式。现在我不确定您的确切版本，但较新的版本会像这样发布。因此，您将获得额外的 div，这是您可能没想到的，并且子菜单的输出方式可能不是您所期望的。另外，正如前面的人所说，您的代码不太正确，缺少一些标签。

<div class="menu-id-container">
  <ul class="nav-menu" id="menu-id">
     <li class="..." id=".."><a href="#">LINK</a>
        <ul class="sub-menu">
        <li><a href="#">Child LINK1</a></li>
        </ul>
     </li>
     <li class="..." id="..."><a href="#">LINK2</a></li>
  </ul>
</div>

【讨论】：