How to display hover tab's sub-menu on page load?

Technical Q&A
1

Hi There,

Working on a concept menu for a client. It has hover tabs and multiple layers. Right now I’m just trying to wrap up functionality before it moves into styling. I’d like to set it up in such a way that on page load, the default hover tab is already selected or showing its sub-menu. Does anyone know an easy way to do this? I thought maybe I could switch the CSS classes on load, but not sure how to switch back.

Page is here:

https://urbanely-backyard.myshopify.com/pages/tabs#

PW: laguna.

Thanks!

2

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
    #defaultOpen~ul {
    display: block;
    position: absolute;
    top: 43px;
    width: 100%;
    left: 0px;
    background: #bababa;
    }
    #defaultOpen~ul li, a#defaultOpen~ul li a {
    display: inline-block;
    float: left;
    padding: 5px;
    background: #bababa;
    }