php - WordPress:wp_nav_menu 有时会搞砸

Question

我使用 wordpress 函数 wp_nav_menu() 来显示我在 WP 菜单中创建的分层菜单。这是片段:

<?php wp_nav_menu('show_home=1&menu_class=page-navi&sort_column=menu_order'); ?>

这是它的 html 输出:

<div class="menu-default-container"><ul class="page-navi" id="menu-default"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127" id="menu-item-127"><a href="http://domain.tld/">Home Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-128" id="menu-item-128"><a href="http://domain.tld/?page_id=7">Il film</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129" id="menu-item-129"><a href="http://domain.tld/?page_id=9">Di che cosa parla?</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133" id="menu-item-133"><a href="http://domain.tld/?page_id=121">Una storia di occasioni</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130" id="menu-item-130"><a href="http://domain.tld/?page_id=11">Il Regista</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131" id="menu-item-131"><a href="http://domain.tld/?page_id=14">Il “maestro”</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139" id="menu-item-139"><a href="http://domain.tld/?page_id=34">Incontri e discussioni</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153" id="menu-item-153"><a href="http://domain.tld/?page_id=144">News ed eventi</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-141" id="menu-item-141"><a href="http://domain.tld/?page_id=36">Film e lavoro in classe</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142" id="menu-item-142"><a href="http://domain.tld/?page_id=62">Il titolo del film</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134" id="menu-item-134"><a href="http://domain.tld/?page_id=23">Interviste</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-19 current_page_item menu-item-138" id="menu-item-138"><a href="http://domain.tld/?page_id=19">Sponsor e collaborazioni</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151" id="menu-item-151"><a href="http://domain.tld/?page_id=148">Contatti</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158" id="menu-item-158"><a href="http://domain.tld/?page_id=156">Credits</a></li>
</ul></div>

问题是有时显示不正确:

.. 而其他人则不是:

我检查了源代码，是一样的!! :o

不知道怎么想的。这些东西吓到我了! :P 如果你想重现这个(如果你幸运的话......在满月之夜)，这里是网站。

Answer 1

这是因为这种风格而发生的:

ul li {
display: inline;
padding: 2px;
}

将以下样式添加到您的 css 应该可以解决您的问题:

.menu-default-container ul li {
display: block !important;
}