:last-child not working

I'm trying to create a horizontal nav bar with "::" as a separator. I want to use :last child so that the last item does not have the separator after it.
The problem is that as soon as I put the :last-child code in, it overrides the styling for the whole list.

I tried using :after first - but had the same issue, so I decided to try the less-elegant solution of a background image.

Then I tried a transparent image "space.png." Blue dots still disappear with :last-child. For testing I made "space.png" into pink dots.
Voila! when :last-child code is there (either before or after the menu item style) the dots all turn pink.

Here's the CSS:

region-menu ul.menu li{

    display: inline;
    text-transform:uppercase;
    padding-bottom: 0;
background: transparent url(/drupal/sites/all/themes/fiscalnotes/images/blueDotssm.png) no-repeat scroll center right;
padding: 0 20px 0 0;

}

region-menu ul.menu li:last-child{

background-image: url(/drupal/sites/all/themes/fiscalnotes/images/space.png);

}

Is this a bug or am I doing something wrong? This always worked before in non-Drupal sites. I'm using 7.x-2.1 since I couldn't figure out how to upgrade to the new alpha/omega without blowing away everything I've done so far. That documentation would help a lot. (sorry - it has been a frustrating day!)

Thanks.