纯CSS响应式菜单溢出-x问题等等

Question

在这个代码笔中，我有 2 个问题：

悬停在类别87(子类别81(子子菜单不可见，因为它向右滚动：我确定我必须添加

overflow-x: -100%

但我还没有找到在哪里添加它

此外，还存在以下问题

类别4

(以及第一列中的所有子类别(的行为与类别 27 和其他，但在这一点上我不知道该错误。

可以建议解决方案

Answer 1

1. 您的 HTML 代码无效，可能会给您一些错误。请注意，具有 4,7,13,19,27 等子类别的类别...未正确关闭。顺便说一句，我建议您缩进代码，您会更清楚地看到它。

   <li>
      <a href='/?cat_13'>Category 13</a>
      <ul>
        <li><a href='/?cat_14'>Category 14</a></li>
      </ul>
   </li>
   

2. 在第 343 行，您应该删除:not( :first-child )以解决第一列问题。

   .nav li:not( :first-child ):hover ul li ul li {
     left: 100%;
     top:-1.5em;
   }
   

3. 您应该决定如何处理最后一列。我不知道你说的overflow-x:-100%到底是什么意思.您可能希望最后一列子类别位于左侧，以避免窗口滚动条。一种选择可能是这样的：

   .nav li:last-child:hover ul li ul li {
     left: -100%;
     top:-1.5em;
   }
   

我希望它有所帮助。