CSS:hover效果区域问题求助：如何维持下拉菜单激活状态？

1. 修正HTML嵌套结构 #

你的HTML存在标签嵌套错误，connection-navbar这个<ul>必须放在父<li>内部，且标签闭合顺序要正确，否则会直接导致布局和交互异常：

<ul class="navbar">
    <li>
        <a href="">Accueil</a>
    </li>
    <li class="has-dropdown">
        <a href="">Se connecter</a>
        <ul class="connection-navbar">
            <li>
                <a href="">Se connecter via e-mail</a>
            </li>
            <li>
                <a href="">Se connecter via nom d'utilisateur</a>
            </li>
        </ul>
    </li>
</ul>

这里给包含下拉菜单的父<li>添加了has-dropdown类，方便后续CSS精准选择。

2. 重写CSS逻辑，解决hover失效问题 #

核心问题是你之前把hover触发点放在了<a>标签上，当鼠标移到下拉菜单区域时，<a>的hover状态会消失，导致下拉菜单隐藏。我们需要把hover触发点转移到父<li>上，同时用绝对定位让下拉菜单脱离文档流，彻底避免布局晃动：

.navbar {
    list-style-type: none;
    line-height: 3em;
    padding: 5px;
    margin: 0; /* 清除默认边距，避免布局偏移 */
}

.navbar li {
    position: relative; /* 为下拉菜单的绝对定位提供参考基准 */
    padding-right: 50px; /* 调整间距，避免过大导致布局错乱 */
    display: inline-block; /* 替换inline，支持padding、高度等样式 */
    cursor: pointer;
}

/* 父li hover时，显示下拉菜单 */
.navbar .has-dropdown:hover .connection-navbar {
    display: block;
}

.connection-navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; /* 绝对定位，脱离文档流，不影响其他元素 */
    top: 100%; /* 定位在父li底部 */
    left: 0;
    background: #fff; /* 添加背景，避免和下方内容重叠 */
    border: 1px solid #eee; /* 可选：添加边框区分下拉区域 */
    min-width: 220px; /* 固定下拉菜单宽度，避免内容换行 */
}

.connection-navbar li {
    line-height: 4em;
    display: block; /* 下拉选项垂直排列 */
    padding: 0 15px; /* 添加内边距，扩大点击交互区域 */
    width: 100%;
    box-sizing: border-box; /* 确保padding不影响元素宽度 */
}

/* 可选：给下拉选项添加hover高亮效果 */
.connection-navbar li:hover {
    background-color: #f5f5f5;
}

关键修改说明 #

• 将父<li>的display从inline改为inline-block，支持padding、高度等样式，彻底解决布局晃动问题。
• 用父<li>的:hover控制下拉菜单显示，只要鼠标在父<li>范围内（包括下拉菜单），hover状态就会持续保持。
• 下拉菜单采用position: absolute定位，基于父<li>的位置布局，不会干扰其他元素，也不会出现菜单消失的情况。

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