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

[mlio_dev]

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! 

[LitExtension]

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