响应式菜单子项消失问题求助：480px视图下菜单异常

嘿，我来帮你搞定这个菜单bug！你遇到的情况是因为移动端样式里的绝对定位子菜单没有正确绑定到父元素，再加上脱离文档流的特性，导致交互范围出了问题。

问题根源 #

在max-width:480px的媒体查询中，你给.has-children ul设置了position:absolute，但没有给它的父元素<li class="has-children">添加position:relative。这会导致两个问题：

1. 子菜单的定位基准变成了整个文档（而非父菜单项），位置容易错位；
2. 绝对定位元素脱离文档流，<nav>的高度不会被展开的子菜单撑开。当你把鼠标从最后一个带子菜单的项移到About/Contact区域时，鼠标其实已经离开了父菜单项的交互范围，触发hover状态丢失，子菜单关闭的同时，后面的菜单项也因为nav高度不足“消失”。

修复方案 #

只需要两个小调整就能解决：

• 在移动端媒体查询中，给.has-children添加position:relative，让子菜单相对于父菜单项定位；
• 给移动端的.has-children ul设置top:100%，确保子菜单刚好出现在父菜单项下方，避免错位。

修改后的完整代码 #

.has-children ul { display: none; width: 100%; }
nav ul li:hover ul, .has-children ul .has-children:hover ul { display: flex; flex-direction: column; }
html,body,nav, ul, li, a, span{ margin:0; padding:0; }
body{ font-family:helvetica; font-size:16px; }
nav ul { background-color:#444; display:flex; flex-direction:column; }
nav ul li{ list-style-type: none; }
nav ul li a{ padding:.8rem 1rem; display:block; text-decoration: none; color:#f9f9f9; }
nav ul li:hover{ background:rgba(0,0,0, .25); }
.arrow{ font-family:FontAwesome; float:right; }
.arrow-down::after{ content:"\f107"; }
.arrow-right::after{ content:"\f105"; }

@media only screen and (max-width:480px){
 .has-children {
   position: relative; /* 添加：让子菜单相对父元素定位 */
 }
 .has-children ul { 
   display: none; 
   width: 100%; 
   position: absolute; 
   top: 100%; /* 添加：确保子菜单在父元素下方 */
   left: 0; /* 可选：对齐父元素左侧 */
   background-color: #444; /* 可选：继承背景色，避免透明 */
 }
 nav ul li:hover ul, .has-children ul .has-children:hover ul { display: flex; flex-direction: column; }
 .has-children ul li a { padding-left: 2rem; }
 .has-children ul .has-children ul a { padding-left: 3rem; }
 nav ul li { list-style-type: none; }
 .arrow-down::after { content: "\f107"; }
 /* 可选：优化二级子菜单定位 */
 .has-children ul .has-children {
   position: relative;
 }
 .has-children ul .has-children ul {
   left: 100%;
   top: 0;
 }
}

@media only screen and (min-width:480px){
 nav ul{ flex-direction:row; /* justify-content:flex-end; */ }
 nav ul li{ position:relative; flex:1 0 auto; text-align:left; }
 .has-children ul, .has-children ul .has-children ul{ display:none; width:100%; position:absolute; }
 .has-children ul .has-children ul{ left:100%; top:0; }
 nav ul li:hover ul, .has-children ul .has-children:hover ul{ display:flex; flex-direction:column; }
}

<nav>
 <ul>
 <li class="has-children"><a href="#">Home <span class="arrow arrow-down"></span> </a>
 <ul>
 <li><a href="#">Item - 1 </a></li>
 <li><a href="#">Item - 2 </a></li>
 <li class="has-children"><a href="#">Item - 3 <span class="arrow arrow-down arrow-right"></span> </a>
 <ul>
 <li><a href="#">Item - 1 </a></li>
 <li><a href="#">Item - 2 </a></li>
 <li><a href="#">Item - 3</a></li>
 <li><a href="#">Item - 4 </a></li>
 <li><a href="#">Item - 5 </a></li>
 </ul>
 </li>
 <li><a href="#">Item - 4 </a></li>
 <li><a href="#">Item - 5 </a></li>
 </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

额外优化说明 #

• 添加background-color: #444是为了让子菜单和主菜单背景一致，避免下方内容透出来；
• 给二级子菜单的父元素也添加position:relative，并设置left:100%和top:0，可以让移动端的二级子菜单横向展开，和桌面端交互逻辑保持一致。

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