WordPress 类别菜单 jQuery/CSS 悬停

Question

我正在尝试为运行 WordPress 的博客使用下拉菜单；我想做的是为我的类别设置子菜单。所以它应该看起来像这样：http://d.pr/i/jj0I - 确实如此......但它在页面加载时也看起来像这样 - 这不是我想要的。一般来说，如果我不使用 WordPress，这将是一个简单的解决方案，因为我可以将以下内容添加到我的 HTML 中。

没有 WordPress 的 HTML 菜单：

<ul class="dropdown">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>
        <ul style="visibility: hidden;">
            <li>Sub menu - Link 1</li>
            <li>Sub menu - Link 2</li>
        </ul>
    </li>
    <li>Link 4</li>
</ul>

带有 WordPress 的 HTML 菜单

<ul class="dropdown" style="visibility: hidden;">
    <?php wp_list_categories('title_li='); ?>
</ul>

我想要用 WordPress 做的是能够在我的子菜单上使用 'style="visibility: hidden;"'。如果我重写 wp_list_categories 是可能的，但我需要通过主题检查，所以我不能这样做。因此，如果在页面加载时不使用 'style="visibility: hidden;"'，子菜单会自动显示而不会悬停。

我的 jQuery：

jQuery(document).ready(function ($) {

jQuery("ul.dropdown li").hover(function() {
    $('ul:first',this).css('visibility', 'visible');
}, function() {
    jQuery(this).removeClass("hover");
    jQuery('ul:first',this).css('visibility', 'hidden');
    });
});

如果有帮助，您可以在以下位置查看下拉菜单：http://wpvault.com/kahlam-test/

如果我遗漏了任何内容，我很抱歉，如果我有，我会尽快添加。

Answer 1

.dropdown .children{
    visibility:hidden;
}

Answer 2

在页面加载时隐藏你的 ul..

$(function() {
   $('ul.dropdown li > ul').hide();
   // Your Code here
});

Answer 3

为什么不使用菜单创建屏幕并以这种方式创建菜单？

您可以使用 WP 菜单创建器创建分层菜单，并且 html 应该与您要查找的内容大致相当。