Well, the COW bar is not a Dreamweaver spry menu, so the CSS follow different rules here (that's my guess by seen the code here).
For me what has always worked is: doing some math.
>Get your main container width.
>Add a div for your menu (or use the ul of your spry menu) and place a background image to be repeated or stretched to the full width of your container.
>Populate your menu.
>Choose the font for your menu.
>Add some padding and margin until it fits, this is kind of try and error. Add a background for the hover state and maybe a background vertical line for every
<li> tag, no repeat and left or right aligned for separation.
>USE ALWAYS PIXELS in all of your measures.
I like centered menus, to do this I create a div for the menu bar and then I give a fixed width to the list, try and error to get it right, and center it.
Here's an example:
http://www.claut.com.mx
As you can see, I don't use spry menu. I avoid them if I can for accessibility reasons. But sometimes you just have to use them. No problem, use the same principles.