如何让导航栏下拉菜单的hover伪类选择器正常生效？

问题根源 #

你使用的a.services:hover div.nav-dropdown属于后代选择器，仅能匹配a.services标签内部嵌套的.nav-dropdown元素。参考你给出的HTML结构，.nav-dropdown和.top-nav-container为平级关系，并不在a.services的内部嵌套结构中，因此选择器无法命中目标元素，hover规则不会触发。

修复方案 #

提供两种适配不同需求的修复方式：

方案1：调整HTML结构（全浏览器兼容） #

将.nav-dropdown下拉菜单移动到a.services标签内部，修改后的HTML代码如下：

<div class="main-topnav">
        <div class="top-nav-container">
            <div class="top-nav">
                <a class="main" href="#">الرئيسية</a>
                <a class="services hover" href="#">الخدمات
                    <div class="nav-dropdown">
                        <ul class="dropdown-ul">
                            <li><a href="#">انظمة دار السعادة</a></li>
                            <li><a href="#">MY ROOM</a></li>
                            <li><a href="#">I DESIGN</a></li>
                            <li><a href="#">IDEAL HOME</a></li>
                        </ul>
                    </div>
                </a>
                <a class="hover" href="#">احدث الاعمال</a>
                <a class="hover" href="#">معرض الاعمال</a>
                <a class="hover" href="#">الاخبار و المقالات</a>
                <a class="hover" href="#">اتصل بنا</a>
            </div>
        </div>
</div>

结构调整后，你原本编写的CSS规则a.services:hover div.nav-dropdown { display: block;}即可正常生效，无需修改CSS代码。

方案2：修改CSS选择器（无需改动HTML，适配现代浏览器） #

如果不需要兼容Chrome 105、Firefox 121、Safari 15.4以下的旧版本浏览器，可以使用:has()选择器修改hover规则，代码如下：

/* 原有隐藏规则保留 */
div.nav-dropdown{ display: none;}
/* 替换原有hover规则 */
.top-nav-container:has(.services:hover) + .nav-dropdown {
    display: block;
}
/* 补充规则：悬浮到下拉菜单本身时保持显示，避免鼠标移开a标签后菜单立刻消失 */
.nav-dropdown:hover {
    display: block;
}

内容的提问来源于stack exchange，提问作者OMER