css - 父菜单和子菜单垂直分隔符(独特的，高级的)

Question

我在 http://www.roydukkey.com 有以下导航.导航设计为在父菜单和它的子菜单之间有垂直分隔符。如果您在“联系人”菜单项下查看，它看起来与设计的方式相同，但请查看“元素”下的内容。如果菜单上没有子项，则不应存在垂直分隔符。

如何仅通过 CSS 实现正确的设计？

---

这目前无法通过 CSS 实现。

这是我选择的解决方案:

// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
    $(this).find("> ul > li")
        .slice(0, $(this).find("~ li").length + 1)
        .addClass("vertical-separator")
});

他们只是为垂直分隔符设置这些元素的样式。

Answer 1

纯 CSS 是不可能的。你必须计算 <li> 的数量s在 child <ul> .如果您重组菜单，您可以将分隔符放在子项中 <ul>反而。然后你要么 a) 在每个 <li> 的左边显示分隔符在子<ul> , 或使用 :first-child只在第一个显示它。