With these changes to your code the visual result is exactly what i need
@media only screen and (min-width: 992px) {
.site-header .item-design-mega-menu .nav-sublist-dropdown {
left: 20em !important;
margin: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 70% !important;
transform: none !important;
overflow:scroll;
}
.item-design-mega-menu, .header-top,
.header-main, .header-bottom,
.header-wrapper .header-bottom .et_column {
position:static;
}
}
The problem is that the dropdown won’t stay open when i hover.
You can see it live on the link and credentials i provided you in my previous post.
Thank you in advance