如何移除导航下拉菜单中的黑色左侧分隔线？

嗨Francis，我来帮你搞定这个导航菜单的小问题～

你遇到的问题根源在于，当前CSS里的.site-nav li选择器会匹配所有嵌套在.site-nav容器内的<li>元素——包括下拉菜单里的子菜单项，所以分隔线才会跑到下拉里，显得杂乱。

只需要把选择器改成直接子元素选择器，就能精准定位到顶级导航的菜单项，不会影响下拉里的子项。修改后的CSS代码如下：

.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; 
}

这里的>符号表示“直接子元素”，.site-nav > li只会选中.site-nav下第一层级的<li>，下拉菜单里的子<li>不会被这个选择器匹配，也就不会出现多余的左侧分隔线啦。

内容的提问来源于stack exchange，提问作者Francis Duggan