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: 
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
You can write like this also:

```
.menubar li + li
{
    background:url(../image/rightborder.png) no-repeat left center;
}   

```

First close your **UL**