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.

For this site users seem to have difficulty finding the site's content that is accessible through the 'Data' drop down menu on the top left.

To improve this I would like to have this drop down menu expanded by default – but only on the front page.

By this older (not WordPress related) StackExchange question (that is including a JSFiddle) and some other comments I have learned that I should use jQuery. I tried my best but I have not been able to get it working at all on my site.

What are the CSS elements on my site that I have to address in the JQuery code? And where should I put this code? Would somebody be able to help me?

Edit:

Thank you very much user49916! This works! The problem that I encountered was that the second level children were also expanded by default. To hide them and then only show them on hover I added this:

/*Make the drop down menu expanded by default – on the front page*/
    .home ul#menu-all-descendants-as-submenus li ul {
        left: 0;
    }

    /*Make the drop down menu expanded by default and hide the sub-children – on the front page*/
        .home ul#menu-all-descendants-as-submenus.menu li ul ul {
            left: -999em;
        }
    /*Make the drop down menu expanded by default and show the sub-children on hover of menu – on the front page*/

        .home ul#menu-all-descendants-as-submenus.menu li ul li:hover>ul {
            left: 0;
        }
share|improve this question

closed as off-topic by TheDeadMedic, Pat J, toscho Apr 4 at 14:32

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer 1

up vote 1 down vote accepted

To be honest I think you can just use some custom css to get the job done. Wordpress gives the homepage a custom body class of home. so if we use that and dig down in the css to the first menu and move it over into view you should be good.

.home .menu > li > ul {
left: 0;
}

and to get the hover state on the 'Data' link just use

.home #header .menu a {
background: #D3D3D3;

}

hope this helps!

share|improve this answer
    
+1. Ensure the Theme calls body_class() where appropriate, then rely on the classes output on the site front page. Outside of that, this question is CSS/JS-related. –  Chip Bennett Apr 4 at 13:24
    
The theme is calling body_class() so he should be good to go. –  user49916 Apr 4 at 13:33

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