CSS实现菜单项悬停显示容器的问题求助

你的代码存在几个关键问题，导致鼠标悬停无法触发容器显示，下面逐一说明并给出修复方案：

1. 类名重复与选择器匹配混乱 #

你给<a>标签和内部的<div>都添加了menu_item1类，这会让CSS选择器同时匹配两个元素，导致逻辑混乱。另外，相邻兄弟选择器+要求目标元素必须是触发元素的直接下一个兄弟元素，如果你的<a>和<section>之间还有其他元素，选择器直接失效。

修复步骤 #

第一步：修正HTML结构 #

移除内部div的重复类名，确保菜单和mega菜单容器是直接相邻的兄弟元素：

<a href="#" class="menu_item1">
  <div><Strong>Item</Strong></div>
</a>
<!-- 确保该section是a标签的直接下一个兄弟元素 -->
<section class="mega_menu_container">                    
    <div class="mega_menu_outer">                            
        <div class="mega_menu_inner">                            
            Inner MEGA MENU
        </div>
    </div>
</section>

第二步：修正CSS代码 #

• 明确指定触发hover的是<a>标签，避免匹配内部div
• 添加visibility: hidden，解决透明状态下容器仍可点击的问题
• 给.menu_item1补充display: flex，否则flex-direction属性无效

.mega_menu_container {
    width: 100%; 
    position: fixed; 
    z-index: 99999999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

/* 仅针对a标签的hover状态，选择直接相邻的mega菜单容器 */
a.menu_item1:hover + .mega_menu_container {
    opacity: 1;
    visibility: visible;
}

.menu_item1 {
    display: flex;
    flex-direction: row;
}

备选方案（适用于菜单与容器非直接相邻的场景） #

如果你的HTML结构无法让两者成为直接兄弟，可以将它们放在同一个父容器内，通过父容器的hover触发显示：

HTML结构 #

<div class="menu_wrapper">
  <a href="#" class="menu_item1">
    <div><Strong>Item</Strong></div>
  </a>
  <section class="mega_menu_container">                    
      <div class="mega_menu_outer">                            
          <div class="mega_menu_inner">                            
              Inner MEGA MENU
          </div>
      </div>
  </section>
</div>

对应CSS #

.menu_wrapper:hover .mega_menu_container {
    opacity: 1;
    visibility: visible;
}

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