如何摆脱下拉菜单中的行？

Question

Image of problem

嗨我有一个问题，我的菜单项之间的黑色水平线也出现在下拉菜单中，看起来很乱。一个例子是上图。任何想法我可能会删除它/从我的代码下面的

排除下拉菜单

.site-nav li {
border-left: 1px solid #000000;
margin: 0px 0;
}
.site-nav li:first-child {
border-left: none;
}
.site-nav li > a {
line-height: 20px;
height: 20px;
}

感谢您的帮助

弗朗西斯

Answer 1

如果.site-nav是您的ul元素的类，请尝试此操作。

.site-nav > li {
    border-left: 1px solid #000000;
    margin: 0px 0;
}

或者，如果.site-nav未定义为ul元素的类，请尝试此操作。

.site-nav ul > li {
    border-left: 1px solid #000000;
    margin: 0px 0;
}

Answer 2

将行.site-nav li {更改为.site-nav > ul > li {
（或者：.site-nav > li {如果您的site-nav类位于ul元素上。）

您也可以将此添加到您的css中：
site-nav li li { border-left: none; }

另一个选项是将此类添加到要删除边框的元素上：
.no-border { border-left: none; }

Answer 3

您只需从嵌套li中移除边框，就像从first-child

中移除边框一样

.site-nav > [dropdown element name] li {
border-left: none;
}