1

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

我使用 Ian Stewart 开发了主题的基本框架：
如何创建 WordPress 主题：终极 WordPress 主题教程

并使用以下方法开发菜单 CSS：使用 CSS
创建多级下拉菜单并通过 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. 但直到子菜单不可见。

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

4

2 回答 2

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>
于 2012-10-26T00:58:24.720 回答
1

好的，我终于得到了解决方案。
这不是 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 在修复错误方面提供的帮助。

于 2012-11-01T14:17:59.003 回答