Question

I’m trying to use dropdown menus for my blog that’s running WordPress; what I want to do is have sub menus for my categories. So it should look like this: http://d.pr/i/jj0I – which is does.. but it also looks like this on page load – which is not what I want. Generally speaking if I wasn’t using WordPress this would be an easy solution as I could add the following to my HTML.

HTML menu without WordPress:

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

HTML menu with WordPress

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

What I’m wanting to do with WordPress is have the ability to use ‘style=”visibility: hidden;”‘ on my sub menu. It’s possible if I rewrote the wp_list_categories but I need to pass themecheck so I can’t do that. So without using ‘style=”visibility: hidden;”‘ on page load the sub-menu shows automatically without hovering over.

My 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');
    });
});

If it helps you can view the dropdown menu live at: http://wpvault.com/kahlam-test/

I’m sorry if I’ve left anything out, if I have I’ll do my best to add it quickly.

Answer 1

.dropdown .children{
    visibility:hidden;
}