sharepoint - How do I use only css to keep a drop down menu open when an item in the menu is selected?

Question

I'm using this css code for my SharePoint site and it currently shows the sub-menu when the main menu item is hovered over. However, when I select an item from the main menu, the sub-menu is hidden again. I want the submenu to remain open if I click on an item and go to the corresponding page so I know which page I am currently on. How do I keep the sub-menu open to show which page I am currently on?

#sideNavBox .ms-core-listMenu-verticalBox ul ul {
 display: none;
}

#sideNavBox .ms-core-listMenu-verticalBox ul li:hover ul {
 display: block;
}

Answer 1

Use the :focus pseudo-class, Like:

#sideNavBox .ms-core-listMenu-verticalBox ul li:focus ul {
 display: block;
}