If you install the DOM Inspector extension, it has the ability to inspect "Chrome" windows, which I do not think is possible with the built-in element inspector. But it could be tricky to inspect context menus.

This source file might be helpful in finding the id attributes of various elements: http://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser-context.inc

Here's the top level id of the menu where that file is incorporated by reference: http://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xul#315

Thank you!

Hm, I tried this:

menupopup {
background-color:#FFFFFF !important;
}
#contentAreaContextMenu {
background-color:#FFFFFF !important;
} 
menupopup#contentAreaContextMenu {
background-color:#FFFFFF !important;
} 

to make the background white for the entire thing, but it doesn't work for some reason? Any help? Thanks!

Moderator edit: Added nowiki and pre tags to see the CSS better

CSS is tricky with its rules of precedence and specificity... try this:

menupopup#contentAreaContextMenu .scrollbox-innerbox {
  background-color:#FFFFFF !important;
}

To use the DOM Inspector for exploring the menu, use File > Inspector Chrome Document on any page, then scroll down looking for popupset#mainPopupSet and expand that and look at the menuPopup elements.

You may have to add the -moz-appearance: none !important; rule.

Thanks jscher2000!

Regarding the individual menu items, I actually want to style all of the menu items to look like google chrome's options, i.e. with the blue background upon hover. So shouldn't

menuitem:hover {background-color:#0000FF} 

work?

Hm, I just tried it, and it seems it doesn't work...

Hm, it seems the menuitem CSS works for the *bookmarks* menu, so its probably a different menuitem...

Ok, I now tried doing it for each option. I started with a random option I found and did this: menuitem#context-openlinkprivate {

 background-color:#4281F4 !important;

} But it didn't work for the "open link in new private window" either : (

Did you try this?

#context-openlinkprivate {
 background-color: #4281F4 !important;
 -moz-appearance: none !important;
} 

Oh, yes, I forgot to add that, thanks! That worked.

By the way, as both yours and jrscher2000's replies solved my problem (thanks to both of you!), I'm not sure what the correct etiquette is regarding marking answers as solved. Whose answer do I mark as solved?

This issue is certainly solved, however, is marking as solved generally considered as a way to thank the answerer, or a way to help future visitors?

If it is the latter, I suppose the norm is to create a new reply merging all the solving replies and marking it as solved.

If it is the former, then I really have no idea what to do. Any advice? Thanks.

Maybe with a little more vertical padding:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
menupopup#contentAreaContextMenu .scrollbox-innerbox {
  background-color:#FFFFFF !important;
}
menupopup#contentAreaContextMenu menu,
menupopup#contentAreaContextMenu menuitem {
  padding-top:2px !important;
  padding-bottom:2px !important;
}
menupopup#contentAreaContextMenu menu:hover,
menupopup#contentAreaContextMenu menuitem:hover {
  color:#FFFFFF !important;
  background-color:#4281F4 !important;
  -moz-appearance: none !important;
}

Hi Dimension10, we get the same pay whether we get solutions or not. (Nothing!) So either way is fine. I think cor-el's tip about -moz-appearance probably was the most important point in this thread, so if you're choosing, I'd pick that one.

Thanks jscher2000 about the tip on padding and for the advice on choosing solutions. I have done accordingly, and to help future visitors, I will edit the question to link to your second-last response which contains the code that may be helpful to future visitors.