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 remove the lines that are being generated beneath my bootstrap navbar

    How to make expand-collapse different div heights according to device width using css/javascript

    How do I get a div to be positioned above an image?

    HTML to PDF (by javascript) how can I add css or table?

    How to add multiple css files to CKEditor editorarea

    How can I programatically show/hide a button that is part of the body template in Meteor?

    How to Align text with respect to image css

    How to find last/first not empty child using only CSS?

    How do people make sections in HTML pages? [closed]

    How to avoid with css when background of the second line covers the letters of the first line?

    CSS how to vertical align div in a div against a sibling div (inline-block)

    How to overlay a play button over a YouTube thumbnail image

    how to show background image(multiple) if out of current div

    How to make a fixed navigation bar stretch to the width of the browser?

    How to center div while keeping inside divs on same line in css?

    How to toggle animate with css display:none

    How to create multiple columns in a div

    how to set formatting of all textbox in asp.net website with css, without set cssclass property of each textbox

    How to get a list of css attributes of an element with jquery

    How to make a CSS file valid?

    how is at the rate import filename.css in style tag different from link tag to relate to css file

    How to add styling (CSS) to tags in Javascript/Jquery

    How can I eliminate the space above my list?

    How can i make these tabs Responsive

    How to achieve this diagonal drop down effect with CSS?

    how to set border spacing in javafx

    CKEditor — How can I add document-specific CSS styles

    How to make Firefox button respect padding?

    How to make image hover in css?

    two divs in one div with img in each two, how to autoresize but keep row formation?