如何在HTML 5中使用CSS中的2级滚动选项卡

Question

我需要制作这样的标签，其中包含水平滚动条，我使用HTML 5 figure和figure标题

HTML示例

<div class="footernav">
  <a href="javascript:void(0)">
    <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
        <figcaption>
                <h3>Product Name</h3>
        </figcaption>
    </figure>
  </a>
</div>

CSS

.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: auto; white-space:nowrap; padding-bottom: 1.9%;}
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:hidden; }
.footernav figure:last-child { margin-right: 0; }
.footernav img { min-width: 118px; max-width: 118px; padding:3px;  }
figure{margin:0}
.footernav a:hover,
.footernav a.selected { border-top-left-radius: 15px;
border-top-right-radius: 15px; background:red}
.footernav h3 { color: #000; font-weight: 700; margin-top: 0; margin-bottom: 0.3em; font-size: 1.1em; text-transform: uppercase; margin-top:0.5em }

请参阅此处http://jsfiddle.net/jitendravyas/XnAsL/1/ （链接已更新）

现在如何升级到第二级，如下图所示？

两个级别都应滚动。

Answer 1

我只是用了一个我能想到的最简单的逻辑。

检查您的小提琴here的更新。

我刚刚复制了你的div，给了他们一个公共类来表示为子项。然后在原始链接上使用rel属性来显示这些框。

$(".link").click(function() {
    var rel = $(this).attr('rel');
    $(".subtabs").hide();
    $("#"+rel).show();
});

更新：

由于你想要一个CSS解决方案，为了表示子项目，最好的（或唯一的）方法是将它们嵌入其中。但是你目前的标记模式，不会允许它。因为内联元素将包含块元素。虽然这在HTML5下有效（当然还处于实验阶段），但是没有按预期呈现（实际上div会弹出标签）。因此，您必须将标记样式更改为适合的内容。

根据我们的讨论，this fiddle完成所需的工作。

更新II

既然你说过，脚本将由其他人完成。一个简单的代码片段将完成工作。系统会选择一个特定的行，并在用户点击它时保持选中... You can check the fiddle of this here

$(".footernav > li").click(function() {
    $(this).toggleClass("selected");
});

<子> 附： 第二行定位在小提琴盒内不能正常工作。所以你可能会在一个单独的页面中进行测试。