鼠标悬停#navigation-region时下拉菜单不显示问题求助

安全阿岳

2026-7-2

鼠标悬停显示下拉菜单的CSS问题排查

问题概述

需实现鼠标悬停#navigation-region元素时显示下拉菜单，目前JavaScript已成功为该元素添加nav-secondary__support-link-active类，但菜单仍无法显示，问题出在CSS样式与HTML结构的匹配上。

原始代码

HTML

<div> 
 <div class="support-section" class="nav-secondary__support-link">
                <ul class="nav__support-links">
                    <li id="support-phone-usa" class="support-phone">
                        <a href="tel:asdasdas" ><img src="h" alt="Phone Icon">aasdasd6</a>
                    </li>
                    <li id="support-phone-int" class="support-phone">
                        <a href="asdasdasd" >Iasdasdasd</a>
                    </li >
                    <li id="navigation-region" class="">
                        <a href="#" onclick="return false;">Region: USA/Intl
                            <span><img src="" alt="icon arrow" id="arrow"></span>
                        </a>
                    </li>
                        <ul class="nav-secondary__dropdown nav-secondary__dropdown-region">
                            <li class="nav-secondary__dropdown-link nav-secondary__dropdown-title">Select your preferred<span>country / region:</span></li>
                            <span class="nav-secondary__hr"></span>
                            <li class="link nav-secondary__dropdown-link-region">
                                <a href="asdasdasd" lang="en-US"><picture><source srcset="/asdasdasd" media="(min-width: 768px)"></picture>USA + International</a>
                            </li>
                            <li class="link nav-secondary__dropdown-link-region">
                                <a href="asdasdasd/" lang="en-CA"></picture>Canada</a>
                            </li>
                            <span class="nav-secondary__hr-end"></span>
                            <li class="nav-secondary__dropdown-link nav-secondary__dropdown-copy" style="font-style: normal;text-transform: none;font-size: 14px;">Experience local shipping options and optimized product inventory for your region.</li>
                        </ul>
                    </li>
<div>

CSS

.support-section {
            display: flex;
            justify-content: flex-end;

            .nav__support-links {
                display: flex;
                list-style: none;
                align-items: center;
                gap: 20px;

                .nav-secondary__support-link-active .nav-secondary__dropdown-region {
                    opacity: 1;
                    visibility: visible;
                    display: block;
                    
                }
            }

            .nav-secondary__dropdown-region {
                visibility: hidden;
                opacity: 0;
                display: none;

                ::before {
                    content: "";
                    position: absolute;
                    top: -8px;
                    right: -3px;
                    width: 0;
                    height: 0;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                }
            }             
    }

JavaScript

if (navigationRegion) {
  navigationRegion.addEventListener("click", function (event) {

  const linkElem = event.target.closest('a');

  if (linkElem) {
    const parentElem = linkElem.parentElement;


    if (parentElem.classList.contains('nav-secondary__support-link-active')) {
      return false;
    }

    linkElem.parentElement.classList.add('nav-secondary__support-link-active');
    linkElem.setAttribute('aria-expanded', 'true');
  }
  });


  navigationRegion.onmouseover = function () {


    if (!navigationRegion.classList.contains('nav-secondary__support-link-active')) {
      navigationRegion.children[0].setAttribute('aria-expanded', 'true')
      navigationRegion.classList.add('nav-secondary__support-link-active');
      return false;
    }
  }

  navigationRegion.onmouseout = function () {
    if (navigationRegion.classList.contains('nav-secondary__support-link-active')) {
      navigationRegion.children[0].setAttribute('aria-expanded', 'false')
      navigationRegion.classList.remove('nav-secondary__support-link-active');
      return false;
    }
  }
}

问题排查与修复

1. HTML结构错误

下拉菜单.nav-secondary__dropdown-region被放在#navigation-region的</li>标签之后，导致两者为同级关系，但CSS使用的是后代选择器，无法匹配同级元素。同时存在标签重复定义、闭合错误的问题。

修正后的HTML：

<div> 
 <div class="support-section nav-secondary__support-link">
                <ul class="nav__support-links">
                    <li id="support-phone-usa" class="support-phone">
                        <a href="tel:asdasdas" ><img src="h" alt="Phone Icon">aasdasd6</a>
                    </li>
                    <li id="support-phone-int" class="support-phone">
                        <a href="asdasdasd" >Iasdasdasd</a>
                    </li>
                    <li id="navigation-region" class="">
                        <a href="#" onclick="return false;">Region: USA/Intl
                            <span><img src="" alt="icon arrow" id="arrow"></span>
                        </a>
                        <!-- 将下拉菜单移入#navigation-region的li内部 -->
                        <ul class="nav-secondary__dropdown nav-secondary__dropdown-region">
                            <li class="nav-secondary__dropdown-link nav-secondary__dropdown-title">Select your preferred<span>country / region:</span></li>
                            <span class="nav-secondary__hr"></span>
                            <li class="link nav-secondary__dropdown-link-region">
                                <a href="asdasdasd" lang="en-US"><picture><source srcset="/asdasdasd" media="(min-width: 768px)"></picture>USA + International</a>
                            </li>
                            <li class="link nav-secondary__dropdown-link-region">
                                <a href="asdasdasd/" lang="en-CA">Canada</a>
                            </li>
                            <span class="nav-secondary__hr-end"></span>
                            <li class="nav-secondary__dropdown-link nav-secondary__dropdown-copy" style="font-style: normal;text-transform: none;font-size: 14px;">Experience local shipping options and optimized product inventory for your region.</li>
                        </ul>
                    </li>
</div>

合并重复的class属性
修正</li >的多余空格
将下拉菜单移入#navigation-region的li内部，确保为后代关系

2. CSS选择器与样式修正

原选择器层级错误，且下拉菜单缺少定位参照，导致无法正确显示。

修正后的CSS：

.support-section {
    display: flex;
    justify-content: flex-end;

    .nav__support-links {
        display: flex;
        list-style: none;
        align-items: center;
        gap: 20px;

        // 精准匹配active状态下的#navigation-region内部的下拉菜单
        #navigation-region.nav-secondary__support-link-active .nav-secondary__dropdown-region {
            opacity: 1;
            visibility: visible;
            display: block;
        }
    }

    // 为下拉菜单提供绝对定位参照
    #navigation-region {
        position: relative;
    }

    .nav-secondary__dropdown-region {
        visibility: hidden;
        opacity: 0;
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border: 1px solid #eee;
        padding: 15px;
        transition: opacity 0.3s ease, visibility 0.3s ease;

        &::before {
            content: "";
            position: absolute;
            top: -8px;
            right: 15px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
        }
    }             
}

给#navigation-region添加position: relative，作为下拉菜单绝对定位的参照
修改选择器为#navigation-region.nav-secondary__support-link-active .nav-secondary__dropdown-region，确保匹配正确的层级
添加过渡动画、背景色和边框，优化菜单显示效果
调整箭头位置与颜色，使其与菜单风格统一

3. 可选：JavaScript交互优化

原mouseout事件会导致鼠标移到下拉菜单时立即关闭，可优化为监听整个菜单区域的鼠标离开事件：

const navigationRegion = document.getElementById('navigation-region');
const dropdownMenu = document.querySelector('.nav-secondary__dropdown-region');

if (navigationRegion && dropdownMenu) {
  // 点击切换菜单
  navigationRegion.addEventListener("click", function (event) {
    const linkElem = event.target.closest('a');
    if (linkElem) {
      const isActive = navigationRegion.classList.contains('nav-secondary__support-link-active');
      navigationRegion.classList.toggle('nav-secondary__support-link-active');
      linkElem.setAttribute('aria-expanded', !isActive);
      event.preventDefault();
    }
  });

  // 鼠标进入导航区域显示菜单
  navigationRegion.addEventListener('mouseenter', function() {
    navigationRegion.classList.add('nav-secondary__support-link-active');
    navigationRegion.querySelector('a').setAttribute('aria-expanded', 'true');
  });

  // 鼠标离开导航或菜单区域时隐藏菜单
  const handleMouseLeave = function() {
    setTimeout(() => {
      const isHoverNav = navigationRegion.matches(':hover');
      const isHoverDropdown = dropdownMenu.matches(':hover');
      if (!isHoverNav && !isHoverDropdown) {
        navigationRegion.classList.remove('nav-secondary__support-link-active');
        navigationRegion.querySelector('a').setAttribute('aria-expanded', 'false');
      }
    }, 100);
  };

  navigationRegion.addEventListener('mouseleave', handleMouseLeave);
  dropdownMenu.addEventListener('mouseleave', handleMouseLeave);
}

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

鼠标悬停#navigation-region时下拉菜单不显示问题求助

问题概述 #

原始代码 #

HTML #

CSS #

JavaScript #

问题排查与修复 #

1. HTML结构错误 #

2. CSS选择器与样式修正 #

3. 可选：JavaScript交互优化 #