导航多级下拉菜单显示异常求助：hover二级项时三级菜单误触发

问题现象 #

• 鼠标悬停主导航的「Residences & Services」时，第一级下拉菜单正常显示
• 鼠标悬停第一级下拉中的「Providence Point」时，第二级与第三级下拉菜单同时显示
• 需求：仅当鼠标悬停第二级下拉中的「Independent Living」时，才显示第三级下拉

当前使用的CSS代码 #

nav[role="navigation"] { position: relative; }

nav[role="navigation"] ul { margin: 0 0 0 0;
                            padding: 0 0 0 0; 
                            display: block; }

nav[role="navigation"] ul li { clear: both; display: inline-block; }
nav[role="navigation"] ul li a {  }

nav[role="navigation"] ul li ul  { display: none; } 
nav[role="navigation"] ul li:hover ul  { display: block; } 
nav[role="navigation"] ul li ul  { position: absolute;
                                   padding: 10px 0 0 0; }

nav[role="navigation"] ul li ul li { display: block;
                                     position: relative; }

nav[role="navigation"] ul li ul li ul  { 
    display: none !important; 
}
nav[role="navigation"] ul li ul li:hover ul  {  
    display: inline !important;
}
nav[role="navigation"] ul li ul li ul { 
    padding: 0 0 0 0 !important;
}
nav[role="navigation"] ul li ul li ul li {
        position: relative;
}

nav[role="navigation"] ul ul ul ul  { 
    display: none !important; 
}
nav[role="navigation"] ul ul ul li:hover ul  { display: inline !important; 
}
nav[role="navigation"] ul ul ul ul { padding: 0 0 0 0 !important;}

nav[role="navigation"] ul ul ul ul li { display: inline-block !important;
                                           position: relative; }

/* Top Navigation */

#access {
  padding: 28px 0 0;
    width: 100%;
}
#access ul {
    text-align: right;
}         
#access a {
  color: #fff;
  padding: 8px 32px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
    display: block;
}
#access li:last-child a {
    padding-right: 0;
}
#access a:hover { 
    color: #DCA812; 
}
#access li.current-menu-item a {
    border-bottom: solid 4px #DCA812;
}
#access ul li ul {
    width: 300px;
}
#access ul li:hover ul  {
    background: #0B335B;
    padding: 5px;
    text-align: left;
}
#access ul li ul li ul {
    width: 200px;
    left: 290px;
    top: 0;
}
#access ul li ul li ul li {
    padding: 0 5px 0 10px;
}
#access ul li ul li ul li ul {
    width: 200px;
    left: 200px;
    top: 0;
}
#access ul li ul li ul li ul li {
    padding: 0 5px 0 10px;
}

问题原因 #

核心问题出在CSS选择器的层级逻辑：
当前使用的后代选择器（空格）会匹配hover元素下所有层级的ul元素。比如nav[role="navigation"] ul li ul li:hover ul规则，当悬停「Providence Point」这个li时，会同时显示它的直接子ul（第二级下拉），以及该ul内部所有后代ul（第三级下拉），导致多级下拉同时弹出。

修复方案 #

将所有触发下拉的:hover规则中的后代选择器替换为直接子选择器>，确保仅显示当前hover元素的直接子下拉菜单，深层下拉保持隐藏，直到hover对应父元素：

修改后的核心规则：

/* 主导航hover显示直接子下拉 */
nav[role="navigation"] ul li:hover > ul  { display: block; } 

/* 第二级li hover显示直接子下拉 */
nav[role="navigation"] ul li ul li:hover > ul  {  
    display: inline !important;
}

/* 第三级li hover显示直接子下拉 */
nav[role="navigation"] ul ul ul li:hover > ul  { 
    display: inline !important; 
}

默认隐藏规则保持不变，确保所有非直接子下拉初始状态为隐藏：

nav[role="navigation"] ul li ul  { display: none; } 
nav[role="navigation"] ul li ul li ul  { 
    display: none !important; 
}
nav[role="navigation"] ul ul ul ul  { 
    display: none !important; 
}

额外优化建议 #

• 尽量移除不必要的!important，可通过结合#access选择器提升规则特异性（如#access ul li:hover > ul），降低调试复杂度
• 统一下拉菜单的display属性（如全部使用block或inline-block），保持样式一致性

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