The only problem with that solution is that it introduces an issue in regards to the background showing through on the right hand side of the navigation.
After talking a little more with Keith, we’ve managed to come up with what seems to be a working solution (and by we, I mean Keith, I only changed one line of his proposal): http://jsfiddle.net/joshnh/UazCp/
Basically, the background colour and pattern has been placed on the unordered list, and the list items are given a white background. That background is then removed when given a class of active.
What are your thoughts? Any problems with this approach? Any ways to improve it?
This reply has been reported for inappropriate content.
@chriscoyier I was thinking about going down that path, but I need IE7 support. Sorry for not stating that in my original post, I’ve updated it to reflect that now.
Also, each nav item can’t exceed the content plus padding width. Is there an easy way to get that behaviour using display: table;? Normally removing width: 100%; on the parent would work, but in this case, that breaks the way the background image is set up.