html - 如何在子菜单项上添加最后一个边框

Question

我需要你的帮助。

就目前而言，我有一个看起来很棒的 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>

Answer 1

试试这个:.navbar li > ul > li:last-child {border-bottom:1px solid black;}

此外，您可以将此 height: 100%; 添加到您的 .navbar li ul li a 选择器中，这样您的文本就不会溢出边界，对于某些你的链接。