Question

我正在为WordPress开发自定义主题
我用伊恩·斯图尔特的作品开发了主题的基本骨架：
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。

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

Answer 2

好的，我终于得到了解决方案这不是jQuery问题，jQuery只是为菜单设置动画。我在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，感谢他通过错误修复提供的帮助。

WordPress DropDown菜单CSS

2 个答案: