父菜单和子菜单垂直分隔符(唯一，高级)
我在http://www.roydukkey.com有下面的导航。导航被设计为在父菜单和其子菜单之间有垂直分隔符。如果你在“联系人”菜单项下看，它看起来像它的设计方式，但是在“项目”下面看一看。如果菜单上没有子项，就不应该存在are垂直分隔符。
如何通过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")
});它们只是为垂直分隔符设置这些项目的样式。
回答 5
Stack Overflow用户
发布于 2013-03-31 21:48:50
纯CSS是不可能的。您必须计算子<li>中的<ul>数。如果重新构造了菜单，则可以将分隔符放在子<ul>中。然后，要么在子<li>中的每个<ul>的左边显示分隔符，要么使用:first-child只在第一个显示它。
Stack Overflow用户
发布于 2013-03-31 22:00:50
您不能精确地这样做，因为CSS还不能(还)知道另一个DOM元素的子元素数。
CSS4可能在不久的将来能够做到这一点(提升到样式的父级)：http://www.w3.org/TR/selectors4/#subject。这看起来也很有趣，尽管不是纯CSS；http://demo.idered.pl/jQuery.cssParentSelector/。也许您可以在计算子菜单的子菜单后再次下降，但是用CSS所具有的低逻辑选择方法来实现这一点将非常复杂。
您可能最好在沙斯中这样做，但是这样就不再是本地CSS了，然后您就可以回到JavaScript了。
这里有一个例子，说明父母自己的风格是如何根据“至少”有多少个孩子来决定的；
JSfiddle
<ul>
<li>
<ul class="submenu">
<li>Contact 1.1</li>
<li>Contact 1.2</li>
<li>Contact 1.3</li>
<li>Contact 1.4</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul class="submenu">
<li>Contact 2.1</li>
<li>Contact 2.1</li>
<li>Contact 2.3</li>
</ul>
</li>
</ul>CSS
li {
list-style: none;
display: inline-block;
border: 1px dotted red;
padding: 15px;
}
.submenu li {
display: block;
padding: 15px;
border: 0px;
border-top: 1px dotted blue;
}
.submenu li:nth-child(1) {
border: 0px;
}
/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
border-left: 1px dotted blue;
}祝好运!
Stack Overflow用户
发布于 2013-03-31 22:01:07
你的CSS被缩小了，所以我不能给你行号。
在您的custom.css文件替换
#main li li.level-open:after, #main li li.level-open~li:after {rules}使用
#main li li.level-open:after {rules}https://stackoverflow.com/questions/15672756
复制相似问题
腾讯云开发者
