Question

有人可以给我建议或告诉我如何只在我的子菜单的第一个和最后一个孩子添加边框.CSS last-child和First-child的问题是我的菜单li由2个UL构成＃li;带有li元素。我想说的是，当我放ul li:last-child因为我的名字test2的li只有1个孩子ul时它会同时针对我的菜单的第一个ul而发生这种情况：http://prntscr.com/dbxpeo

它针对我的另一个其他Li元素的第一个ul，其中有2个ul。我只希望边框位于底部，只在第一个和最后一个li元素的顶部，所以当你将鼠标悬停在菜单上时它会变成背景，类似于This!这是我的CSS：

＆＃13;

/*--------------------------------------------------------------
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;
}
}

＆＃13;

<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>

＆＃13;

我正在使用wordpress，所以我尝试重建菜单的HTML，我觉得它很准确。

Answer 1

您可以使用:last-child伪类，此选择器允许您直接定位最后一个元素

ul li:last-child{ 
    border-bottom: 1px solid black;
}

根据您的需要进行调整，您可以添加多个标记以适应HTML结构，例如ul li li:last-child或ul li:last-child li

您可以阅读更多here

Answer 2

应用此代码

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

Answer 3

HTML结构看起来很奇怪，为什么我们有那些嵌套的子菜单而不是li？你可以在后端分享菜单结构的截图吗？

如何将边框底部仅放在下拉菜单

3 个答案: