我正在尝试构建一个内容导航模式，该模式使用垂直堆叠的选项卡来切换选项卡旁边隐藏内容面板的显示。在较小的宽度下，这种模式会中断。
这是我的小提琴：http: //jsfiddle.net/jrotton/xCeX8/1/
它有点响应......但假设我有 12 个选项卡，它们的标签长度范围从“护理”到“建筑、设计和施工”。当屏幕低于 500px 左右时，这会中断。
我可以：
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..它可以工作，但当您有多个标签时它并不理想。我宁愿隐藏选项卡菜单并将面板更改为带有可点击 h2 的可折叠面板。该模式可通过屏幕阅读器访问也很重要，但我还没有做到这一点。
关于我如何做到这一点的任何想法？提前致谢..