CSS global link background problem

Answer 1

Yes, apply a class (or an id) to the navbar list and move the color/background-color declarations to the css for that particular element.

<ul class="colorThisListOnly">

<!-- other stuff -->

</ul>

with the css:

ul.colorThisListOnly
{
color: #fff;
background-color: #98bf21;
}

What's causing the 'bleed' is that you're targeting the a (links) for styling, rather than the list itself. And as you use a tags in more than one place, they're all targeted by the same selector and thus styled the same.

You can, of course, still address the a tags if you'd rather, but select them based on their parent:

ul.colorThisListOnly > li > a:link,
ul.colorThisListOnly > li > a:visited
{
color: #fff;
background-color: #98bf21;
}

Answer 2

You need to override your catch all styles with something more specific like the following:

.toolbar a:link, .toolbar a:visited {background-color: #000;}
.toolbar a:hover, .toolbar a:active {background-color: #000;}