Hover over parent and show child - css

Question

I have a dynamic mega menu that shows the first tier of submenus but I'm trying to make it so that the second tier show up when an element in the 1st tier is hovered over. currently both tiers and showing up taking up a lot of space.
I found a post on here saying to use this layout:
.child{ display:none; }
.parent:hover .child{ display:block; }
It's kind of tricky with the css I have:
child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent = .dropdown-menu.burt .new-menu .dropdown-submenu > a
I tried this but it's not working:
.new-menu .dropdown-submenu .dropdown-menu.burt{
display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
Targeting these specific elements seems tricky and the only way I could get them specifically was the mess I have above. Maybe I can target these elements a better way, or another way of making this work?
Update
Here is the html structure, it's kind trick, it's from Americommerce and it uses 'Merge Codes' that supply the dynamic data
This is the main structure:
<ul class="nav navbar-nav">
<ac:layoutarea id="Item">
<ac:visibilityarea id="phDDLink">
<li class="dropdown">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu mm2">
<div class="row"> $$SUBMENU$$</div>
</ul>
</ac:visibilityarea>
</li>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li>
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
</ul>
This is the structure of the sub-menus:
<ac:layoutarea id="SubItem">
<ac:visibilityarea id="phDDLink">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>
</ac:visibilityarea>
</li>
</div>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li class="greg">
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
Update 2
HTML from inspector
<ul class="dropdown-menu mm2">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu"> Products
<ul class="dropdown-menu burt">
<li class="greg"> Product 1 </li>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
Update 3
I added a class to the first <a> and then added this css:
.new-menu .dropdown-submenu .dropdown-menu.burt {
display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
It hides the elements but showing them on hover still doesn't work
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>

Answer 1

Your HTML structure is not clear so I tried to create my own and try to recreate your problem
have a look
.new-menu{
display: none;
}
.dropdown-submenu{
display: none;
}
.dropdown-menu{
display: none;
}
.mainParent:hover .new-menu{
display: block;
}
.mainParent:hover .dropdown-submenu{
display: block;
}
.mainParent:hover .dropdown-menu{
display: block;
}
<a class="mainParent">
Link
<div class="new-menu">
<div class="dropdown-submenu">
<div class="dropdown-menu burt">
Application Menu
</div>
</div>
</div>
</a>
If each element having a property to hide, then each element class have to make visible on parent element hover.
If you are facing some kind of nested DOM CSS problem, you can see this running code snippet
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
.dropdown-submenu:hover a{
color: red !important;
}
.dropdown-submenu:hover .burt{
display: block;
color: red !important;
}
.dropdown-submenu:hover .new-menu{
display: block;
color: red !important;
}
.new-menu:hover .burt{
display: block;
}
.new-menu:hover .greg{
display: block;
}
.new-menu:hover a{
display: block;
color: black !important;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>

Answer 2

You can always add another class for your child elements and to your parent element.
<html>
<head>
<style>
.f-red {color:red;}
.childEl{
display:none;
}
#parentEl {padding: 5px; border-style: solid;}
#parentEl:hover > .childEl {display:block}
</style>
</head>
<body>
<div id="parentEl">
<h1 class="childEl f-red">Child</h1>
</div>
</body>
</html>