WordPress 下拉菜单 CSS答案

【问题标题】：WordPress DropDown Menu CSSWordPress 下拉菜单 CSS
【发布时间】：2012-10-15 22:36:14
【问题描述】：

我正在为 WordPress 开发自定义主题。

我使用 Ian Stewart 开发了主题的基本骨架：
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

并使用以下方式开发菜单 CSS：
Create a multilevel Dropdown menu with CSS and improve it via jQuery

它们都很好，很完整。

当我尝试将 自定义菜单 注册到主题时，CSS 在子菜单中对我不起作用。为了注册自定义菜单，我在header.php中使用了以下代码：

<?php wp_nav_menu ( array ( 'theme_location'=>'primary', 'fallback_cb'=>'') ); ?>

它对我有用，并在我指定的位置显示我的自定义菜单。但是使用自定义 CSS，下拉菜单（子菜单）没有显示。我在后续菜单中使用了z-index，但直到它们被隐藏为止。

请注意：wp_nav_menu() 正在创建如下标签：

<ul id="menu-new-custom-menu" class="menu">

所以，我在 CSS 中将所有 #nav 替换为 .menu。但直到子菜单不可见。

请帮助我找出我的一大堆编码的错误。
P.S.：我使用的是 WP 3.4.2，没有与菜单相关的插件。我的 CSS 和教程的完全一样，除了 .menu。

【问题讨论】：

你能把你的代码贴在某个地方吗？从您目前提供的信息来看，答案并不明显。
您能否给我们一个指向您遇到问题的站点/页面的链接？
here 是必要的代码。不幸的是，该主题在其他任何地方都不活跃。感谢您的关注。

标签： css wordpress drop-down-menu wordpress-theming

【解决方案1】：

也许这一定是您的 jquery 问题？我检查了你的 css，我没有发现任何问题，但是当我检查你的 header.php 时，没有 jquery 库和嵌入它的 jquery 自定义代码。

您是否在您的 jquery 代码之前放置了一个 jquery 库？见下文，将其放在 head 标记中的 header.php 中。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
  function mainmenu(){
      $(" .menu ul ").css({display: "none"}); // Opera Fix
      $(" .menu li").hover(function(){
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
 }



 $(document).ready(function(){                  
mainmenu();
 });
</script>

【讨论】：

【解决方案2】：

好的，我终于找到了解决方案。
这不是 jQuery 的问题，jQuery 只是为菜单设置动画。我在 CSS 中发现了一个错误的属性，在 nano.css:

#access{
    background-color: #333;
    height: 25px;
    font-size:16px;
    text-transform:uppercase;
    overflow:hidden;
    }

将会

#access{
    background-color: #333;
    height: 25px;
    font-size:16px;
    text-transform:uppercase;
    }

overflow:hidden 隐藏了子菜单。

另外我添加了z-index到：

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
position:absolute;
z-index:5000;
}

用于子菜单。现在它在这里工作正常。
感谢 Amit Chowdhury 协助修复错误。

【讨论】：