悬停Dropdown时Dropmenu不显示，求助CSS选择器与结构问题

核心问题分析 #

你的代码存在两个关键问题：

1. CSS选择器语法错误，且与元素层级关系不匹配
2. HTML标签嵌套不规范，存在未闭合标签导致结构混乱

第一步：修正HTML结构 #

首先补全未闭合的标签，确保dropmenu与dropdown处于同一父级li下，保证元素层级关系正确：

<header>
    <nav>
        <div class="navleft"><h1>Morocco.</h1></div>
        <div class="navmid">
            <ul>
                <li>
                    <div class="dropdown">
                        <a href="">Decouvrir le Maroc</a>
                    </div>
                    <div class="dropmenu">
                        <ul>
                            <li>Histoire</li>
                            <li>Histoire</li>
                            <li>Histoire</li>
                            <li>Histoire</li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Destination</a></li>
                <li><a href="">Infos Pratique</a></li>
                <li><a href="">Nous contacter</a></li>
            </ul>
        </div>
        <div class="navright">
            <img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt=""/>
        </div>
    </nav>
</header>

第二步：修正CSS代码 #

• 删除dropmenu样式中多余的闭合}
• 修正悬停选择器：由于dropmenu是dropdown的同级元素，使用**相邻兄弟选择器+**来关联悬停触发逻辑：

.dropmenu {
    display: none;
    position: absolute;
    text-align: center;
    background-color: #fafafa;
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.dropdown:hover + .dropmenu {
    display: block;
}

可选优化（提升交互体验） #

如果希望鼠标悬停在下拉菜单上时保持菜单显示，建议将dropmenu嵌套进dropdown内部，这样使用后代选择器即可实现：

<li>
    <div class="dropdown">
        <a href="">Decouvrir le Maroc</a>
        <div class="dropmenu">
            <ul>
                <li>Histoire</li>
                <li>Histoire</li>
                <li>Histoire</li>
                <li>Histoire</li>
            </ul>
        </div>
    </div>
</li>

对应的CSS调整为：

.dropdown:hover .dropmenu {
    display: block;
}

以上修改后，就能实现仅悬停.dropdown区域时显示下拉菜单，不会触发整个navbar。

内容的提问来源于stack exchange，提问作者sofiane-benali