WordPress的：wp_nav_menu有时会搞砸

我使用WordPress的功能wp_nav_menu()来显示我的WP菜单中创建的分层菜单。这里的片段：WordPress的：wp_nav_menu有时会搞砸

<?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

我检查了源代码，它是相同的！：o

不知道该怎么想。这些东西吓倒我！：P 这里的网站，如果你想尝试重现这个（如果你是幸运的。在月圆之夜）..

来源

2014-09-02 MultiformeIngegno

如果源中的标记完全相同，那么视觉差异必须归因于CSS。 – henrywright 2014-09-02 16:57:08

他们都是页面，相同（不是自定义）模板..我真的不知道：0 – MultiformeIngegno 2014-09-02 17:53:58

这是我看到它现在搞砸了的页面：http://waiting4maestro.org/?page_id= 19 – MultiformeIngegno 2014-09-02 17:55:14

这是因为这种风格发生：

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

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

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

来源

2014-09-02 19:36:39 Howli

我现在要去尝试，但是......为什么不同的渲染，如果CSS是相同的？：o – MultiformeIngegno 2014-09-02 23:03:13

因为如果您查看页面的源代码，您将看到它是专门为该页面添加的。您可能需要在块后添加'！important'。 – Howli 2014-09-02 23:41:42

WordPress的：wp_nav_menu有时会搞砸

回答

相关问题