Keep anchor hover state on when child submenu is active or on hover

Question

I have a menu inside a menu. The first menu anchor(class = menu-container) which contains the submenu has a hover state with styles attached to it. I want these styles of the parent anchor to remain active when the mouse is also over the submenu.

I cant use jQuery, as I am only restricted to pure javascript.

The code is as following:

<ul>
    <li>
         <a href="#">List Item</a>
    </li>
    <li>
         <a class="menu-container" href="#">List Item</a>
         <ul class="submenu">
              <li>list item</li>
        </ul>
    </li>
</ul>

NOTE: The client has requested the menu to be displayed and hidden using pure CSS. I know that using jQuery to achieve the solution for this would be easier, but I am restricted.

Thanks

Answer 1

"Attach the menu-container class to the parent "li" item...

The ":hover" on the li won't work in IE6 and below but shall work in all modern browsers.