Removing border from end of list

HTML & CSS
1

Hi everyone,

I have a horizontal list that I have applied a border to the right side of to act as a divider between the items, however I would like to remove it from the right side of the last list item. Any idea how I can do this?

 <ul id="topmenu"> 
         <li><a href="#">About Us</a></li>  
         <li><a href="#">Contact Us</a></li>    
       </ul>  

ul#topmenu{
list-style: none;
padding-top: 50px;
}

ul#topmenu li a {
font:18px arial,sans-serif;
color:#FFFFFF;
text-decoration: none;
float: right;
padding-left: 15px;
padding-right: 15px;
border-right: 1px dotted #ffffff;
border-height: 50%;
}

Any help much appreciated!

Thanks,

Ben

2

Awesome, that works perfectly - thanks so much for your quick response!

3

Hi Ben,

The easiest way (that will work in all browsers) is to give a special class to the final A, like so:

 <ul id="topmenu"> 
         <li><a href="#">About Us</a></li>  
         <li><a [COLOR="Blue"]class="last"[/COLOR] href="#">Contact Us</a></li>    
       </ul>

and then in the CSS…


ul#topmenu li a.last {
padding-right: 0;
border-right: none;
}

EDIT

Ah, I see you have the LIs floated right. That will reverse their order, so you’d best put the class=“last” on the … first one.

<ul id="topmenu"> 
  <li><a [COLOR="Red"]class="last"[/COLOR] href="#">About Us</a></li>  
  <li><a  href="#">Contact Us</a></li>    
</ul>