Preventing dropdown from hiding without JavaScript - html

Question

An onClick and hover dropdown menu in pure CSS (no JavaScript) displays the items at first, but the menu doesn't stay open when I put my mouse over the dropdown items (but it does stay open onClick).
Here it is:
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
#media (min-width: 320px) {
.menu-tabs {
position: absolute;
}
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
.menu-check {
display: none;
}
label {
margin-bottom: 0;
}
.label_openclose {
display: inline-block;
width: 60px;
min-height: 50px;
background-color: transparent;
cursor: pointer;
overflow:hidden;
display:block;
}
.menu-tabs .elem {
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-check:checked~.menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Here is a fiddle:
https://jsfiddle.net/Lwjvwcva/

Answer 1

You have to add a rule that tells the browser to show .menu-tabs while hovering on it, so I added this rule:
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
check the updated fiddle here.
hope this helps :)

Answer 2

In order for the submenu to remain open, the item where the submenu sits INSIDE needs to be the one selected on hover. In this case .acn-menu or .nav (I used .nav in my code). To make the hover submenu stay open, I removed and added a few lines in the css:
Removed:
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Added:
.nav .menu-tabs {
display:none;
}
.nav:hover .menu-tabs {
display:block;
}
.menu-tabs .elem {
height:25px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}