Using a Mega Menu w/ Elementor

I have created a header in Elementor and included in the page design using GP Hooks and all was working as expected. I went to create a mega menu according to https://docs.generatepress.com/article/building-simple-mega-menu/ only to find that the CSS was not targeting that element. I changed the code replacing nav .main-nav with .elementor-widget-default-navmenu .elementor-nav-menu resulting in the following:

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu {
	position: static;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul {
	position: absolute;
	width: 100%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul > li > a {
	font-weight: bold;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu>ul>li {
	display: inline-block;
	width: 25%;
	vertical-align: top;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-2>ul>li {
	width: 50%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-3>ul>li {
	width: 33.3333%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-5>ul>li {
	width: 20%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul > li > a:hover,
.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul > li > a:focus,
.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul > li[class*="current-"] > a,
.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu ul ul {
	background-color: transparent !important;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu ul .sub-menu {
	position: static;
	display: block !important;
	opacity: 1 !important;
	width: 100%;
	box-shadow: 0 0 0;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
	display: none;
}

@media (max-width: 768px) {
	nav .mega-menu>ul>li {
		display: block;
		width: 100% !important;
	}
        .elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul {
                position: relative;
        }
}

This works up to a point. The resultant mega menu has a jagged-edged bottom and not a smooth box. What have I missed?