0

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

1

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

  • 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. – sdfkjsdfsgfvsdgfsdg Jul 24 '12 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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