php - Wordpress 多级下拉菜单

Question

我为我的网站创建了一个自定义主题。在这里，我想创建一个多级下拉菜单，我使用仪表板完成了它，但只出现了下拉菜单。

Answer 1

这就是你编写菜单的方式应该用代码编写:

<div id="top-menu">
    <ul>
        <?php wp_nav_menu(array('theme_location'=>'top-menu','container'=>'', 'items_wrap' => '%3$s')); ?>
    </ul>
</div>

上面的代码将被翻译成类似这样的东西:

<div id="top-menu">
            <ul>
                <li><a href="#somelink">Some Text</a></li>
                <li><a href="#somelink">Some Text</a></li>
                <li>
                    <a href="#somelink">Some Text</a>
                    <ul>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li>
                            <a href="#secondLevel">Second Level Text</a>
                            <ul>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

如果您的 functions.php 中尚未添加以下代码，则需要添加:

add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
            'top-menu' => 'Top Menu'
            )
        );
}

那么您的 css 文件应包含以下内容:

#top-menu {
  background:#F4F4F4;
  height:50px;
  width:100%;
}
#top-menu ul {
}
#top-menu ul li {
  display:inline-block;
  float:left;
  position:relative;
}
#top-menu ul li a {
  color:#929292;
  display:inline-block;
  height:50px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  width:130px;
  line-height:50px;
  border-right:#E4E4E4 1px solid;

}
#top-menu ul li ul li a {
  width:200px;
}
#top-menu ul li.current-menu-item > a, #top-menu ul li:hover > a {
  color:#000;
}
/*===>multi level menu */
#top-menu li ul {
  display:none;
  position:absolute;
  left:0;
  border:1px solid #ccc;
  z-index:300;
  width:200px;
  background:#f0f0f0;
}
#top-menu li:hover > ul {
  display:block;
}
#top-menu li ul ul {
  left:140px;
  top:10px;
}
#top-menu li li a {
  border:0;
  border-bottom:1px solid #ccc;
  width:150px;
}

当然你需要做出自己的改变。