Css 将鼠标悬停在父对象上并显示子对象

我有一个动态的超级菜单，显示第一层的子菜单，但我正在尝试使它在第一层的元素悬停时显示第二层。目前，这两个层和显示都占用了大量空间

我在这里找到一篇帖子，上面写着要使用这种布局：

.child{ display:none; }
.parent:hover .child{ display:block; }

我的css有点棘手：

child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent =  .dropdown-menu.burt .new-menu .dropdown-submenu > a

我试过这个，但不起作用：

.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; 
}

针对这些特定的元素似乎很棘手，我唯一能具体获得它们的方法就是我上面的混乱。也许我可以用一种更好的方式来瞄准这些元素，或者用另一种方式来实现这一点

更新 这是html结构，这是一种技巧，它来自Americommerce，使用“合并代码”提供动态数据

这是主要结构：

<ul class="nav navbar-nav">
          <ac:layoutarea id="Item">
            <ac:visibilityarea id="phDDLink">
              <li class="dropdown">
                <a href="#" target="$$TARGET$$">$$TEXT$$</a>
                <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>
                <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
              </li>
            </ac:visibilityarea>
          </ac:layoutarea>

        </ul>

它隐藏了元素，但在悬停状态下显示它们仍然不起作用

.sub链接{
显示：块；
}
.新菜单{
显示：无；
}
格雷格先生
{
显示：无；
}

您始终可以为子元素和父元素添加另一个类

.f-红色{颜色：红色；}
奇德尔先生{
显示：无；
}
#parentEl{padding:5px；边框样式：solid；}
#parentEl:hover>.childEl{display:block}
小孩

您的HTML结构不清晰，因此我尝试创建自己的HTML结构，并尝试重新创建您的问题

看一看

。新建菜单{
显示：无；
}
.下拉子菜单{
显示：无；
}
.下拉菜单{
显示：无；
}
.mainParent:悬停。新建菜单{
显示：块；
}
.mainParent:悬停.下拉子菜单{
显示：块；
}
.mainParent:悬停.下拉菜单{
显示：块；
}

链接
应用程序菜单

你能提供一个html示例吗？希望查看您的html结构，以便我们能够找到解决方案。我认为您应该首先找到主父级，它会影响整个域。您可以提供html代码片段吗？：（你还可以做一件事，从浏览器中复制HTML结构或代码，只要按F12和>检查元素>复制菜单结构，如果可以的话：）你能控制CSS吗？我试着实现了其中的一些功能，但是我仍然无法让鼠标悬停工作。但这些项目是隐藏的。我对我的帖子进行了更新，以显示我所做的更改。如果你还有什么建议，我欢迎！我修改了你的问题，又添加了一个代码片段，你是否面临着这样的问题？

<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">
            <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
            <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">
          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
        </li>

      </ac:visibilityarea>

    </ac:layoutarea>

<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"> <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>
    </div>
</ul>

.new-menu .dropdown-submenu .dropdown-menu.burt {
    display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
    display: block;

}