Html 通过CSS悬停显示元素

我找不到悬停显示代码不工作的原因。 我的意图是：如果我将鼠标悬停在

.nav_menu\u text

，则显示隐藏菜单。 这是由于显示器的弹性？我发现了很多关于这个问题的问题，但没有找到原因

/*导航栏*/
navbar先生{
宽度：2560px；
高度：100px；
显示器：flex；
}
.nav_标志{
宽度：150px；
高度：30px；
利润上限：35px；
左边距：370px；
字体大小：22px；
}
.nav_菜单块{
宽度：670px；
高度：19px；
边缘顶端：40px；
左边距：489px；
显示器：flex；
证明内容：之间的空间；
}
.nav_菜单_文本{
宽度：107px；
高度：19px；
}
.nav_菜单_文本：悬停{
字体大小：粗体；
}
.nav_菜单_文本：悬停#隐藏_菜单{
显示：块；
}
/*下拉列表*/
#隐藏菜单{
显示：无；
宽度：100%；
}
.下拉菜单{
高度：308px；
宽度：678px；
左边距：1007px；
利润上限：-3px；
显示器：flex；
证明内容：之间的空间；
}

标志
文本
英格
菜单>

当您在CSS中有

.nav#u menu_text:hover#hide_menu

时，它会查找名为

#hide_menu

的

的.nav#u menu text

的子菜单，但找不到任何内容。隐藏菜单位于页面的其他位置

如果将它放在悬停的元素中，那么它将工作。 像这样：

<div class="navbar">
    <div class="nav_logo">
        logo
    </div>
    <div class="nav_menublock">
        <div class="nav_menu_text">text

            <div id="hide_menu">
                <div class="dropdown_menu">
                    <div class="dropdown_menu_vertical" id="menu_1">
                        <div class="vertical_text">
                            <div class="vertical_text_txt">menu</div>>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="nav_lang">
        <div>ENG</div>
    </div>
</div>

标志
文本
菜单>
英格

您还必须调整左边距，以获得所需的菜单内容，因为现在开始点将位于

div class=“nav\u menu\u text”

，而不是整个窗口的左边缘。

//简单JavaScript解决方案
const dropdown=document.getElementById（“隐藏菜单”）；
const navMenuText=document.querySelector（“.nav_菜单_文本”）；
navMenuText.addEventListener（“鼠标指针”，（）=>{
下拉列表。类列表。添加（“显示”）；
});
navMenuText.addEventListener（“mouseleave”，（）=>{
下拉列表。类列表。删除（“显示”）；
});
/*
删除了不必要的CSS，也进行了重构
反应灵敏（例如，弹性材料
（大于px值）
*/
navbar先生{
显示器：flex；
证明内容：之间的空间；
}
.nav_菜单块{
显示器：flex；
证明内容：之间的空间；
}
.nav_菜单_文本：悬停{
字体大小：粗体；
}
/*下拉列表*/
#隐藏菜单{
显示：无；
}
#隐藏菜单显示{
显示器：flex；
宽度：100%；
证明内容：中心；
}
.下拉菜单{
显示器：flex；
证明内容：之间的空间；
}

标志
文本
英格
菜单
您可以简单地使用javascript onmouseover事件来实现这一点。您能解释一下您是如何解决这个问题的吗？