具有功能性面包屑导航的纯CSS多层菜单

您不会回避挑战，是吗？:)

在开始更详细的讨论之前，我会说简短的答案是“建立一个静态站点”。换句话说，假设您的设计约束之一是“没有javascript”，请将问题移到您确实可以使用决策逻辑/代码简化解决的地方（例如：服务器）。

即使您设法解决了这个问题（并且我不确定在HTML / CSS的限制下是否有可能），您将要面临的下一个问题是将所有行为都附加到它上面。您将要基于菜单选择加载特定内容，而唯一的方法是：

• 一个javascript事件，或者
• 静态链接（锚元素，因此是我简短回答后面的“为什么”）

一个人可以加载所有内容，也许找到一种有条件地显示它的方法，但是问题是“兔子洞有多深？”。另外，如果您要为功能手机和/或缓慢的连接而构建，则加载所有内容将对用户体验产生负面影响。

综上所述，我设法略微简化了CSS，并通过显示子类别来修复了一个错误（请参见内联注释）。请注意，只有“女士”类别的行为符合预期，因为“男式”和“儿童”缺少某些样式。

.container {
  position: relative;
  width: 360px;
  height: 480px;
  border: 1px solid black;
  margin: 20px auto 0 auto;
}

.breadcrumb {
  margin-top: -20px;
  display: inline-block;
  vertical-align: top;
}

/*
.breadcrumb:checked ~ .smart-nav-panels ul {
  display: none;
}

#bread-home:checked ~ .smart-nav-panels > ul {
  display: block;
}
*/

/* hide all uls except the 'home' ul by default, replaces both of the above */
.smart-nav-panels ul ul {      
  display: none;
}

/*
#bread-women:checked ~ .smart-nav-panels {
  #home, #women {
    display: block;
  }
}

#bread-womens-clothing:checked ~ .smart-nav-panels {
  #home, #women, #womens-clothing {
    display: block;
  }
}
*/

/* these next 3 style definitions are very similar to what you had before (commented 
above), except that there is no longer a need to unhide the 'home' ul, and we're
being more explicit about which uls to hide in correspondence with the state of the
breadcrumb nav */
#bread-home:checked ~ .smart-nav-panels {
  #women {
    display: none;
  }
}    

#bread-women:checked ~ .smart-nav-panels {
  #women {
    display: block;
  }
  #womens-clothing, #womens-shoes {
    display: none;
  }
}

#bread-womens-clothing:checked ~ .smart-nav-panels {
  #women, #womens-clothing {
    display: block;
  }
}

/*
#bread-home:checked ~ .smart-nav-panels li input:checked > ul:first-child {
  display: block;
}
*/

/* (i) the above didn't work because the ul isn't a direct descendant of the input,
rather it is a sibling, and in addition it doesn't matter which breadcrumb item is
checked now */
.smart-nav-panels li input:checked ~ ul {
  display: block;
}

.smart-nav-panels {
  margin: 0;
  padding: 0;
  ul {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: lightgrey;
  }
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  > ul:first-child {
    ul {
      left: 100%;
    }
  }
  /* removed unnecessary styles here */
}
/* removed unnecessary style here */

这解决了一些问题，但还有更多问题。我怀疑解决其中的一些问题会创造出新的问题。我可以想到的一个直接方法是，您希望将分层​​菜单的状态与面包屑相关联，以使您只能看到应有的面包屑（现在，您始终可以看到所有的）。

在某些时候，您将需要事件（出于行为），并且组件将需要了解彼此的状态。尽管CSS具有某些状态功能，但在事件方面却一无所获。这些局限性，级联性质（在其他问题中进行了深入讨论，例如：祖先选择器的缺乏）以及与HTML结构的耦合都使这成为仅凭HTML和CSS很难解决的问题。

我了解在没有JS的情况下进行这种导航的愿望，当然这是一个很容易解决的有趣问题，但是最终我认为这是错误的解决方法。javascript之所以如此普及是有原因的-如果没有它，我们今天的网络体验将是不同的。

（感谢杰西和其他同事的讨论，这些讨论为部分答案提供了参考。我宽容地表述。希望这对其他人有好处。）