Display Menu Items Only on Hover

I will like to use Either CSS3 Mega Menu or Virtuemat Mega Menu to display a new menu section in my header like the one attached.

Such that, The menu only expands to show Level 1 menu Items when clicked or hovered upon at the same time using Mega menu structure.

Hi Becky,
I'm sorry, I don't see your image, Please give me again.
Thank

https://prnt.sc/fedkwu

HI Becky,
Sorry,
This is your site : nexomshopdirect.com/demo4/
But I don't see css3 megamenu on your site. Pls, give me the link where you are using it again?
Your issue: sub menu Css3 don't show when hover?
I will check your issue again,

it is visible now. Please check again

Hi,
Sweet Grocery can't show submenu??
prntscr.com/few8n1
But Pls give me super account again via mail: This email address is being protected from spambots. You need JavaScript enabled to view it., I will check it for you.

U now have super admin account

Hi Becky,
I found this value of template affect to our module, Because it override position of menu, You can hover menu item
Please add some code below in custom CSS field of our module

.bd-container-inner{
position: inherit!important;
}
Hope it will help you

I don't think you understand me. I want my menu items under the All Category Menu to drop down when the first Item is hovered. Just like Amason.com departments menu. On Amazon.com when you click or hover on Departments menu, the list of departments dropdown and when you hover on department, submenus appear in mega menu format. I want the same thing with the All Categories Menu on my site.
www.nexomshopdirect.com/demo4
https://prnt.sc/fgeklj

You already have access to my site. I sent details from francis to your email.

Hi Becky,
I'm sorry,
Currently, our product Can not do the same thing at the site: www.amazon.com/ when you hover "Departments" menu
Thank you so much for empathy