하위 메뉴 항목에 마지막 테두리를 추가하는 방법

당신의 도움이 필요합니다.하위 메뉴 항목에 마지막 테두리를 추가하는 방법

지금 당장은 CCS 메뉴가 멋지게 보이지만 내 하위 메뉴 항목의 상자 모양을 완성하고 싶습니다. 그게 바로 지금처럼, 아래쪽 테두리는 마지막 항목에서 누락되었습니다. 어떻게 이것을 CSS 코딩을 사용하여 수정할 수 있습니까?

HTML 코드 :

<div id="menuwrap"> 
    <ul class="navbar"> 

    <li><a href="#">B2B Portal</a> 
     <ul> 
      <li><a href="#">B2B Portal</a></li> 
      <li><a href="#">Secure Data-Driven Listings</a></li> 
      <li><a href="#">Secure Shopping Cart</a></li> 
     </ul>   
    </li> 

    <li><a href="#">Retrievals</a> 
     <ul> 
      <li><a href="#">Data Listing</a></li> 
      <li><a href="#">Web Scheduling</a></li> 
      <li><a href="#">Mapping Application</a></li> 
     </ul>   
    </li> 
    <li><a href="#">Reporting</a> 
     <ul> 
      <li><a href="#" >Ad Hoc Report</a></li> 
      <li><a href="#">Drill Down Report</a></li> 
      <li><a href="#">Ranking Report</a></li> 
     </ul>   
    </li> 
    <li><a href="#">Business Intelligence</a> 
     <ul> 
      <li><a href="#">Business Dashboard</a></li> 
      <li><a href="#">Web Pivot Table</a></li> 
      <li><a href="#">Interactive Report</a></li> 
      <li><a href="#">What-If Analysis</a></li> 
     </ul>   
    </li> 
    <li><a href="#">Data Maintenance</a> 
     <ul> 
      <li><a href="#">Database CRUD</a></li> 
      <li><a href="#">Database Update</a></li> 
      <li><a href="#">Order Entry</a></li> 
      <li><a href="#">Drag-and-Drop Application</a></li> 
     </ul>   
    </li> 
    </ul> 
</div>

CSS : 마지막으로 어린이나 :

이

.navbar  { 
     height: 18px; 
     padding: 0; 
     margin: 0; 
     position: absolute; 
} 

     .navbar li { 
        width: 135px; 
        float: left; 
        text-align: center; 
        list-style: none; 

     } 

      .navbar a {       
        width: 133px; 
        height: 19px; 
        display: block; 
        text-decoration:none; 
        line-height: 15px; 
        color: #ffffff; 
        border: 1px solid rgb(110,110,110);    
      } 

       .navbar li:hover, a:hover { 
        background-color: #ffffff; 
        color: #000000; 
       } 

       .navbar li ul { 
           display: none;       
           margin: 0; 
           padding: 0;       
           } 

       .navbar li:hover ul { 
          display: block; 
       } 


       .navbar li ul li a { 
          color: #000000; 
          border-top: 0; 
          border-bottom: 0; 
       } 

       .navbar li ul li a:hover { 
        background-color: rgb(255,231,162); 
       } 

       .navbar li:hover > a { 
        background: rgb(255,231,162); 
        color: #000000; 
       } 



</style>

출처

2013-06-11 John Smith

'.navbar li : last-child (테두리 : 1px 빨강)'및 하위 항목'.navbar ul li : 마지막 자식 (테두리 : 1px 푸른 색) ' –

CSS': last -of-type' 및/또는'last-child' 선택자? –