Thesis theme help needed WordPress

Josh Sauberman comments:

That may fix the problem, but this is a clients site and both their WP and theme are not up to date. They only want to fix the menus right now and I'm worried that updating those things may cause other unexpected problems. Any ideas how to fix this with what we've got?

Josh Sauberman comments:

Jim,

I don't know what a sprite is or how to do what you said? Can you help me with this?

Josh

Jim Dugan comments:

I'm looking into it. A sprite is an image file with various images in it. It's what makes the buttons in your menu. That menu is NOT built for submenus. That's really your problem. Making it work with submenus might be tough and they at least will NOT look like the ones above.

Josh Sauberman comments:

Maybe I do need to upgrade then. ...but if I do, won't it mess up the buttons?

Jim Dugan comments:

Give me a minute. I'm getting closer to a solution.

Your sprite is locate at:
http://www.whatworksweightloss.com/wp-content/themes/thesis_17/custom/images/menu_sprite.png
Note that there is no BLANK sprite; they're all meant to be used without the text label.

The text that goes with these buttons is set to show up off the page.

You might be able to get those labels to show with some CSS like:
.custom ul.menu li.tab-4 .submenu li a {background-image: none; background-color: #ffffff; text-indent:0; height: 60px; text-offset: 0;}
.custom ul.menu li.tab-4 .submenu {position: relative; top: 30px; }

add that to the custom.css in thesis_17/custom/

But it's not working perfectly for me: the link isn't working right for one of the menu items.

Jim Dugan comments:

I've got to run and feel a little stymied by this. The code below is what's controlling ALL links in that Articles position.
You need to override that with code for .submenu

This is all in custom.css in the theme's custom folder:

.custom ul.menu li.tab-4 a {
background: url("./images/menu_sprite.png") no-repeat scroll 0 -300px transparent;
height: 46px;
margin: 0 0 0 -54px;
text-indent: -9999px;
width: 171px;
}
.custom ul.menu li.tab-4 a:hover {
background-position: -200px -300px;
}
.custom ul.menu li.tab-4.current a {
background-position: -400px -300px !important;
height: 46px;
margin: 0 0 0 -57px;
width: 169px;
}
.custom ul.menu li.tab-4.current a:hover {
}

Josh Sauberman comments:

Thanks Jim. I appreciate the help. I have to run too, but I'll come back and try your code.