Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've just converted my HTML version of a theme over to Wordpress, and I'm currently converting the dropdown menus over.

What WordPress processes:

<ul class="dropdown">
    <li id="menu-item-190" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-190"><a href="#">Home</a></li>
    <li id="menu-item-185" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="#">About</a></li>
    <li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="#">Contact</a></li>
    <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="#">Drop-downs</a>
            <ul class="sub-menu">
                <li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="#">Page one</a></li>
                <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="#">Page two</a></li>
                <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="#">Page three</a></li>
            </ul>
    </li>
    <li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177"><a href="#">Pages</a></li>
</ul>

On page load, this is what my menu is showing:

<ul class="sub-menu">

I'd like it to show:

<ul class="sub-menu" style="visibility: hidden;">

What WordPress is currently doing:
On load the dropdown menu is currently showing. Screenshot: http://d.pr/i/KMxL - I only want it to show when hovered over, but since converting it from my raw HTML/CSS it's just showing up on page load, but when I do hover over and/or hover off it works fine.

My jQuery

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

I'm not quite sure how to get WordPress to add 'style="visibility: hidden;"' to this. Does anyone have any idea?

Note: If I've missed anything I'll add it, sorry. Furthermore, I'm using the WordPress menus. Using: add_theme_support('menus');

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

You could just add a CSS rule like so: ul.sub-menu { visibility: hidden; }.

share|improve this answer
    
Already had this implemented, but it seems when I did it (last night at 4am) I miss spelt the nav so it didn't work... I just double checked and it works now, haha. Sorry, can't believe I missed that. Thank you. –  Xiy Jul 24 '12 at 19:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.