0

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

1 Answer 1

1

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!

2

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