Is it possible to implement a Mega Drop Down Menu using pure CSS?

I would like to implement a Mega Drop Down Menu for my Navigation Menu using pure CSS i.e. NO Javascript/JQuery. When the user hovers on a navigation item, I'd like to display a mega drown menu which stays active if the user is within the bounds of the menu. If the user moves away or hovers over a different menu, it should then display the relevant menu.

The below image depicts exactly what I'm looking for. GAMES AND TOYS is the first nav-item which on hover should display the mega drop down menu (the overlay with a #ff1300 border). The yellow boxes represent the different nested divs that I'd like to show within a container div.

**Note: I've already tried putting the nav-item and a drop-down within a single div and using

.nav-item:hover .dropdownpanel {
    display: block 
/*    This is set to display: none to be hidden and then shown on hover */
}

Is there a way to achieve what I'm looking for?

via Chebli Mohamed