WordPress:wp_nav_menu有时搞砸了

时间:2014-09-02 16:50:07

标签: php css wordpress

我使用wordpress funcion 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>

问题是有时它显示得恰到好处:

enter image description here

..和其他人不是: enter image description here

我检查了源代码并且它是相同的! :○

不知道该怎么想。这些东西吓到我了! :P 如果您想尝试重现这个网站,请访问以下网站(如果您在满月之夜幸运..)

1 个答案:

答案 0 :(得分:0)

由于这种风格,这种情况正在发生:

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

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

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