Question

HTML

<div>
<ul class="menubar">
 <li>home</li>
 <li>product</li>
 <li>about us</li>
 <li>contact us</li>
</div>

CSS

.menubar li
{
    float: left;
    position: relative; 
    display: block;
    text-decoration: underline;
    text-transform:capitalize
    background:url(../image/rightborder.png) no-repeat right center;
}

.menubar li:hover
{   

    background: #FF0000 ; 
    color: #FFFFFF;
}

This work is working fine but the problem is with background:url(../image/rightborder.png) is coming after the last menu “Contact Us”. Is there anyway to turn off that.

Answer 1

Just add this into the CSS and it may help

.menubar li:last-child { background:none}

But it doesn’t work properly on below IE8