How to add the very last border on the sub menu items


Tags: css,html5,css3

Problem :

I need your help.

As it stands right now, I have a CCS menu which looks great and all, but I do want to complete the box look on my sub menu items. That being the case, as it stands right now, the bottom border is missing from the last item. How can this be modified using CSS coding?

Html code:

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


Solution :

You can use the :last-child or :last-of-type pseudo classes - see http://www.w3schools.com/cssref/sel_last-child.asp

and http://www.w3schools.com/cssref/sel_last-of-type.asp


    CSS Howto..

    How to click an element by innerthtml using CSS selectors in Selenium

    How can I display a list in an x by y fashion?

    How do I create a menu that appears on hover?

    CSS how to place an image to the right of variable width text on roll over?

    how to do CSS for below image box (not a shadow box) [duplicate]

    How to show red border at Invalid Input Box after clicking Submit button with angularjs

    How to avoid bootstrap from overriding id-called custom css?

    How do I avoid using !important?

    How to reserve 'width' for a 'hide' element

    How to host html files like css and javascript files

    CSS Flexbox : How to construct a specific layout

    How to create a pattern overlay on top of an image

    css: How to change row color of a table after its been selected and clicked away

    How to draw a line from the middle of the page to the right side?

    Webpage Css Error.. Not Showing Anything

    How to work with boxes? Html Css

    how to define multiple classes' hover event in css?

    How to set background color for a boxed link?

    How can I list available Css Classes from my App_Themes folder?

    How to correctly override inaccessible HTML content with CSS?

    How do you control CSS styles from within the CMS interface in Zotonic?

    How to stop default CSS in asp.net [closed]

    How do I split a WordPress theme into 2 columns?

    background image not showing on nested

    How to style OL number points in CSS [duplicate]

    How many screen sizes should be handled typically for a responsive website? [closed]

    How to show text on image when hovering?

    How to make the element located in the center of a div?

    CSS: Is there a limit on how many classes an HTML element can have?

    How do I make the box smaller in html?