纯CSS响应菜单overflow-x问题等等

Question

在这codepen中我有两个问题：

悬停Category87（子类别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;
   }
   

我希望它有所帮助。