After some tweaking in Firebug, I managed to come up with HTML and CSS that achieves the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
<a href="#one" class="current" style="background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px;">Featured</a>
</li>
You can refactor the inline styles into corresponding CSS styles. The above code snippet is specific to the selected LI element and its anchor element.
I hope this solution proves helpful to you.
Here's an updated version for you that should function correctly (remember, the provided CSS should only be applied to the designated LI and A elements):
Your HTML Structure
<ul class="nav">
<li class="nav-one current"><a href="#one">Services</a></li>
<li class="nav-two"><a href="#two">Clients</a></li>
</ul>
NOTE: The 'current' class now applies to the selected LI element instead of the A element
Your Revised CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There seems to be an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Below is a demonstration of my changes in Chrome and the resulting outcome:
IMPORTANT: Ensure your image path resolves correctly on your server – consider using the full image path if necessary.
REMINDER: Don't forget to update the markup so the "current" class is applied to the LI element rather than the A element.