I’m including some images, because describing it may be futile.
Simply, I’m trying to create a menu with dropdowns that use background images that are called when hovered over. The background images would be extensions of the main menu image (color palette).
I’ve attached images for reference.
Hi woodsman.dan. Welcome to SitePoint. 
Basically you’d do that by creating your normal dropdown menu and then adding the background images via your styles (CSS).
Here is a nice dropdown example:
You can get the code by viewing source. You may need some classes on each sub UL so that you can give each a differed background image.
If you had a fixed positioned top menu then you could do it simply with one background image that is also fixed (won;t work in ie6 though).
Here’s an example that I constructed in answer to another thread a while ago and should show the process. (The example doesn’t have the menu at position:fixed and wouldn’t really work if the page scrolled but only needs position:fixed adding and left:0;right:0 .)
Jason has an alternative dropdown menu here that is very good but you would need to add classes to the nested ul dropdowns to supply all your different images.
Now, where do you insert the background-image: attribute?
Rather, my question is this: I want to put an image behind the already-styled menu. Would I just make a div with an id of pMenuBg and give it the same width and height of my dropdown background image?
It’s still not really clear what you are asking here. Do you want an image just behind the top-level of the menu, or an image to site behind the whole menu, including the space over which the sub menus appear? You need to be really clear.
Hi,
Using the normal drop down version you would add a class to the nested ul and then apply your background image there making sure that there was enough width and height for it to show and adjust the position also.
e.g.
ul#nav li ul.bg1{
background:green url(imagegoeshere1.gif) no-repeat 0 0;
min-height:300px;/* height of image*/
min-width:300px;/* width of image*/
left:-50px;/* create offset if needed*/
}
ul#nav li ul.bg1 li {margin-left:50px}/* create offset if needed*/
Here’s a revised code for the basic version and the background colours are where you should apply your images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
font: x-small Verdana, Arial, Helvetica, sans-serif;
}
* html body{
font-size:xx-small;
f\\ont-size:x-small;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
margin-left: -999em; /* hide menu from view */
top: auto;
left:0;
}
/* Styles for Menu Items */
ul#nav li li{clear:left}
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #ffffcc; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
margin-bottom:-1px;
min-height:0;
}
/* commented backslash mac hiding hack \\*/
* html ul#nav li a {height:1%; position:relative;}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;}
/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
ul#nav li ul.bg1{
background:green url(imagegoeshere1.gif) no-repeat 0 0;
min-height:300px;/* height of image*/
min-width:300px;/* width of image*/
left:-50px;/* create offset if needed*/
}
ul#nav li ul.bg1 li {margin-left:50px}/* create offset if needed*/
ul#nav li ul.bg2{
background:orange url(imagegoeshere2.gif) no-repeat 0 0;
min-height:200px;/* height of image*/
min-width:300px;/* width of image*/
left:-125px;/* create offset if needed*/
}
ul#nav li ul.bg2 li {margin-left:125px}/* create offset if needed*/
ul#nav li ul.bg3{
background:teal url(imagegoeshere3.gif) no-repeat 0 0;
min-height:300px;/* height of image*/
min-width:400px;/* width of image*/
left:-100px;/* create offset if needed*/
}
ul#nav li ul.bg3 li {margin-left:100px}/* create offset if needed*/
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul class="bg1">
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="bg2">
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="bg3">
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
(won’t work in ie6 due to min widths and heights)
Run the above code and see if that’s the sort of thing you meant.
I want to learn how to put an image behind the top-level of the menu. Sorry I was unclear.
I guess you would just place the background on the top UL, then, and remove any background on the List items.
Paul’s example above does just that.
From what I’ve seen here, this is not what I am trying to accomplish. I have a styled menu hosted at productreviewsbytyler.com. I also have an image that adds a 2nd level background and makes the top level anchor tags look connected with a steel bar. I want to put that .gif image I attached to this thread behind the styled CSS menu.
This is really what I was getting after. 
It still sounds as though you want to do exactly what we’ve been saying above.
I assume you want your image here:
#pMenu {
[B] background: url("http://www.sitepoint.com/forums/attachment.php?attachmentid=56827&d=1312339942") no-repeat scroll 50% 23px transparent;[/B]
[B] height: 30px;[/B]
padding-left: 100px;
padding-top: 2em;
}
If that’s not what you want then you will need to show a picture of the menu with the background placed as you want it.
#pMenu{
padding-top:2em;
padding-left:100px;
background:url(style/pMenuBG.gif);
height:45px;
}
As you will see here, this is what I have added to my dropdownmenus.css file. I still do not see that image appear behind the list.
Paul I am wondering if this javascript could solve that. I tested it with :before and :after and found that it worked in IE7. I have also found in tests that min-width now works in IE6 on the page I tested.
What are your thoughts?
It’s not in that file at the moment.
I just FTP’ed it with the statement as:
#pMenu{
padding-top:2em;
padding-left:100px;
background:url(style/pMenuBG.gif) no-repeat scroll 50% 23px transparent;
height:45px;
}
. Why isn’t that image being displayed?
The link to the image is incorrect. The image is not where you are telling the style sheet to find it. At the moment, it’s looking for a folder called /style/ in the folder that holds the style sheet, but the image is not there.
Paul, that’s a very nice menu. Just out of curiosity, how difficult would it be to center the top level menu items across the page (Home, About, Services, Contact Us)? This example centers the top level menu items first by pushing the parent UL halfway off the screen then by pulling the parent UL’s LI elements (the top level menu items you see) halfway the other direction. Would that be possible with your menu?
Right now I’m learning menus and I will say that as far as anything I’ve done with web design thus far, positioning and targeting nested elements and trying go figure out what to and not to apply :hover to is the most difficult. It really isn’t as intuitive as I would like. I’m still trying to figure out how to target lower level menu items because some examples I’ve seen seem to skip over ul or li elements at times to reach lower level targets.
Also, does that menu of yours work in iPhones and iPads and other touch devices? I’ve read something about CSS dropdowns not working in touch devices unless certain things are done.
Any info you can provide will be appreciated because I’m learning this stuff now basically by taking drop-downs and going through the HTML and CSS line by line to attempt to figure out how they work.
yes, thank you, ralph.m!
I’m not sure what you mean. That file path hasn’t changed in the link you posted. Do you need help to fix it? If so, where is the image located in relation to the CSS file?
No, I have the image displaying where I want it to.