Using a hybrid of Suckfish Dropdowns and Drop-Down Menus Horizontal Style (by Nick Rigby), I constructed the following navigation menu. However, once I had the overall design of my site in place, I decided that having a gradient background would work better than just plain color.

However, even though I understand the basics here, I cannot figure out how to add a background image. I've tried placing the proper code in the logical areas, but all I get is a color- and picture-less menu.

Perhaps somewhere here with more knowledge could let me know what exactly I need to change?
ul {
margin: -5px 0 0 0;
padding: 0;
list-style: none;
position: relative; z-index: 1;
}

li {
float: left;
position: relative;
width: 92px;
border-bottom: 1px solid #fff;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
text-align: left;
}

li > ul {
top: auto;
left: auto;
}

ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #91125f;
padding: 4px;
border: 1px solid #fff;
border-bottom: 0;
font-size: 12px;
font-family: Arial, sans serif;
}

li:hover ul, li.over ul {
display: block;
margin-top: 0;
}

#nav a:hover {
color: #91125f; background-color: #fff;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li {float: left; height: 1%;}
* html ul li a {height: 1%;}
/* End */

Do you want the gradient on the list item, or only on the link hover ?

To put the background on the list item
#nav li{background: url(gradient.gif) repeat-x ; height; xxx px;}

If your gradient is just a small slice, use the repeat, if it's a full image, use no-repeat.

Girl. Now, see, you've been so kind and helpful, I thought, "I couldn't possible ask her yet another question!" So I posted here, intending to spare you. But, uh, that didn't work!

To answer your question, I want it as a background image (for the main bar as well as the sub-selections that appear via rollover). In essence, I want to replace all the maroon/pink color with an image.

Ok, for the main bar, set the gradient as a background to the div.
For the menu items, if you want a roll-over effect, you'll have to add the background to the a:link and a:hover.

That's what I thought. But when I try adding that way, it doesn't change.

Could be a specificity issue, I'd have to see the code with the gradient images.

This is the gradient image:



The CSS code for the menu is posted above. Since in my XHTML document I gave the ul an id of "nav", I tried adding {#nav background: url(...images/nav.gif) repeat-x; }. But that doesn't change anything. I then tried placing the same code under the ul (see initial post), but again nothing.

I'm obviously missing something...

Let me play with this and I'll post back.

ok, this works:

ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #91125f url(nav.gif) repeat-x;
padding: 4px;
border: 1px solid #fff;
border-bottom: 0;
font-size: 12px;
font-family: Arial, sans serif;
}

#nav a:hover {
color: #ffdab9; background-color: #91125f;
}

I changed the color of the on-hover text so that you could see it.

I tried this on my end, but nothing seemed to change but the on-hover text color. *headdesk*

Well, as much as I want to figure this puzzle out, I need to get my site done in two weeks. Sooo...because I really want to graduate in December, I guess I'll stick with the plain background for now and figure it out later.

Thanks for the assistance, though.

Odd, it should work. Did you adjust the path to the background image to point to the image's location on your machine ? If you used my code, the image would have to be at the root of your site.

Well, it didn't work when I originally tried it (even though I got the location correct). But I just tried it again and it's fine. Not sure what error I made previously.

Thank you!

You're welcome ! Glad it finally worked