html - 如何阻止第二个元素 "li"(第一个 ul)具有底部边框

Question

如何阻止(第一个 ul 的)第二个元素“li”具有底部边框

我基本上想删除“登录”li 下的额外边框

#topcleanMenu ul {
  padding: 15px 4px 17px 0;
  list-style: none;
  padding-right: 60px;
}
#topcleanMenu ul li {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
   background: #F5F5F5;
  cursor: pointer;
}
#topcleanMenu ul li:hover {
color: #e56804;
 background: #F5F5F5;
}
#topcleanMenu ul li ul {
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
color: #e56804;
  opacity: 0;
}
#topcleanMenu ul li ul li { 
   background: #F5F5F5;
  color: black;  
}

#topcleanMenu ul:nth-child(1) li:nth-child(2){
border-bottom: 1px solid rgb(199, 199, 199);
}

#topcleanMenu ul li:hover ul {
   border-left: 1px solid rgb(199, 199, 199);
 border-right: 1px solid rgb(199, 199, 199);
}

我附上一张图片来解释这一点: http://imgur.com/ul0gBFa

Answer 1

刚刚删除了这个类

 #topcleanMenu > ul:nth-child(2) > li:nth-child(2){
    border-bottom: 1px solid rgb(199, 199, 199);
    }

并添加了以下类以获得所需的结果 #topcleanMenu ul li ul li 用于创建右边框和 #topcleanMenu ul li ul li:last-child 用于应用底部边框，但仅适用于列表的最后一个 li 元素

#topcleanMenu ul li ul li:last-child  {
    border-bottom: 1px solid rgb(199, 199, 199);
}
#topcleanMenu ul li ul li  {
    border-right: 1px solid rgb(199, 199, 199);
}

JsFiddle:http://jsfiddle.net/Lt3Dh/8/