仅Microsoft Edge中的xy网格和菜单问题

Question

我已经在Foundation 6.5.3中创建了一个响应式下拉/追溯megamenu。

它在除Microsoft Edge和IE11之外的所有浏览器中都很好用。我预料到IE中会出现问题，但边缘问题使我陷入困境。

在Edge中，即使菜单项应该是水平菜单，它们也会垂直堆叠。如这支笔所示：

 https://codepen.io/denpub/pen/KLRQGO

现在，包装菜单的div和包装大菜单的div包含grid-x和单元格样式：

 <div class="grid-x cell ..."></div>

似乎是导致堆叠问题的原因，如果我像这样将它们分开：

 <div class="grid-x ..."><div class="cell"></div></div>

它解决了Edge中的堆叠问题，但导致菜单在所有浏览器中失去了良好的伸缩间距，如这支笔所示：

 https://codepen.io/denpub/pen/KLRojm

在IE11中，所有菜单项都相互堆叠。如果有人有解决此问题的建议，将不胜感激。

Answer 1

我的猜测是它是父菜单上的expanded类。当空间较小时，这可能会导致li's变宽。