html - 如何将边框底部仅放在下拉菜单的最后一个子项上

Question

有人可以给我建议或告诉我如何只为我的子菜单的第一个和最后一个子菜单添加边框。CSS last-child 和 First-child 的问题是我的菜单 li 是由 2 个 UL 构建的与 li 元素。我想说的是，当我输入 ul li:last-child 时，因为我的名为 test2 的 li 只有一个子 ul，它同时针对我菜单的第一个 ul，这发生了:http://prntscr.com/dbxpeo

它以我的其他 Li 元素的第一个 ul 为目标，其中有 2 个 ul。我只希望边框位于底部，并且仅位于第一个和最后一个 li 元素的顶部，因此当您将鼠标悬停在菜单上时它会变成背景，类似于 This! 这是我的 CSS:

/*--------------------------------------------------------------
13. Navigation
--------------------------------------------------------------*/
.site-header .menu-new{
position:relative;
margin-bottom:1.5em;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:0.95em;
font-weight:bold;
width:63%;
height:80px;
left:245px;
}
.menu-new ul{
background:transparent;
list-style:none;
height:100%;
width:100%;
margin:0;
padding:0;
border-radius: 15px;
  -ms-transform: skew(-15deg,0deg);
  -webkit-transform: skew(-15deg,0deg);
  transform: skew(-15deg,0deg);  
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
}
.menu-new li {
display:block;
right:-2%;
float:left;
border-right:1px solid black;
position:relative;
height:auto;
}
/*
.menu-new li:first-child{
border-left:1px solid black;
}
*/
.menu-new li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new li a:only-child:after, .menu-new li li a:after{
content:"";
}
.menu-new li .sub-menu li ul li:last-child, .menu-new li .sub-menu li:last-child {
border-bottom:12px solid black;
border-rdius:5%;
}
/*
.menu-new li > ul >li >ul >li:last-child{
border-bottom:20px solid black;
border-radius:7px;
}
*/
.menu-new li a{
display:block;
font-weight:normal;
line-height:80px;
margin:0px;
padding:0px 30px;
text-decoration:none;
text-align:center;
}
.menu-new li a:hover{
background:#8c8c8c;
opacity:0.8;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}

.menu-new li ul{
display:none;
height:auto;
position:absolute;
padding:0px;
margin:0px;
border:0px;
width:200px;
z-index:200; 
  -ms-transform: skew(0deg,0deg);
  -webkit-transform: skew(0deg,0deg);
  transform: skew(0deg,0deg); 
}
.menu-new ul li:hover a{
background:#000000;
color:#FFFFFF;
opacity:0.8;
text-decoration:none;
}
.menu-new li:hover ul{
display:block;
background:transparent;
color:transparent;
}
.menu-new li li{
display:block;
position:relative;
right:1px;
top:10%;
float:none;
margin:0px;
padding:0px;
width:200px;
background:transparent;
}
.menu-new li li li {
display:block;
position:absolute;
left:0;
top:10%;
float:none;
margin:0px;
padding:0px;
width:200px;
background:transparent;
}
.menu-new li:hover li a{
background:#000;
color:#FFFFFF;
opacity:0.7;
}
.menu-new li li li a{
text-align:center;
}
.menu-new li ul a:hover, .menu li ul li:hover a .menu li li li:hover{
border:0px;
text-align:center;
color:#ffffff;
background:#8c8c8c;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
@media screen and (max-width:1000px){
.menu-new{
display:none;
}
}
@media screen and (max-width:1030px){
.menu-new{
top:80px;
}
.menu li{
background:#fff;
opacity:0.8;
}
.menu-new li> li> li{
background:#fff;
color:#000;
opacity:0.8;
}
.menu-new li >li > li:hover{
background:#000;
color:#fff;
opacity:1;
}
}

<div class="menu-new">
     <nav class="menu" role="navigation">
         <ul class="menu ul">
            <li>
             <a></a>
            </li>
            <li>
             <a></a>                                                                        <ul>
                 <li>
                  <a></a>
                    <ul>
                      <li>
                    <a></a>
                      </li>
                    </ul>
                 </li>
               </ul>
            </li>
           </ul>
                <li>
                  <a></a>
                </li>
                <li>
                  <a></a>
                 <ul>
                  <li>
                    <a></a>
                  </li>
                 </ul>
                 </li>
                </nav>
             </div>

我在 wordpress 上工作，所以我尝试重建菜单的 HTML，我认为它是准确的。

Answer 1

应用此代码

.sub-menu .sub-menu li:last-child{
 border-bottom: 12px solid red;
}

并删除这段代码

.menu-new li .sub-menu li ul li:last-child, .menu-new li .sub-menu li:last-child{
 border-bottom: 12px solid black;
}

更新

看看这是否适合你

ul  ul > li:not(.menu-item-has-children) :last-child{
   border-bottom: 12px solid red;
}