Try something like this:

Add CSS code to the userChrome.css file.

menupopup {
  --panel-color: black !important;
  --panel-background: #e4e0d8 !important;
}

menu:not([disabled="true"])[_moz-menuactive="true"], menuitem:not([disabled="true"])[_moz-menuactive="true"] {
  background-color: #08246d !important;
  color: #fff !important;
}

@cor-el That code recolored all the right click menus as well as File/Edit/View menus, but it did not recolor bookmark drop-down menus, which is what I wanted. It did change bookmark drop-down menu hover over a shortcut color from gray to dark blue and that's it, while what I need is to recolor bookmark drop-down menu backgrounds en mass. Also I like my right click/File/Edit/View menus as they are and don't really want them affected.

So, no more ideas?

Something like this for the Bookmarks Toolbar ?

/*default for menupopup*/
menupopup {
  --panel-background: #08246d !important;
  --panel-color: white !important;
}

/*default for panels*/
panelview {
  --arrowpanel-background: #08246d !important;
  color: yellow !important;
}

/*each panel has a specific ID you can use to override a specific panel*/
#appMenu-libraryView, /*Library toolbar button*/
#appMenu-protonMainView {  /* 3-bar menu button */
  --arrowpanel-background: #08246d !important;
  color: white !important;
}

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #08246d !important;
  --arrowpanel-color: white !important;
}

You can use the Browser Toolbox to inspect the various panels.

• https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Hi jbrandom2, when you come up with the final working solution for menu coloring, please add your code to this thread for reference by other users, along with a screenshot showing the colors. Note: You can surround your code with <pre> and </pre> tags to preserve the formatting. Thanks!

@cor-el Thank you!

That was exactly what I wanted:

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;
}

And this one was also useful for the hamburger button dropdown menu:

/*default for panels*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  color: black !important;
}

Now I only need a couple of final strokes to bring my CSS to perfection.

1). I've noticed bookmark dropdown menus are currently the only kind of menus left with no border outline. I've tried to add this line at the end of bookmaks toolbar code section:

  border: 1px solid rgba(130, 130, 130, 0.5) !important;

It does add a darker border, but for some reason it floats around 3 pixels outside of an actual bookmarks dropdown menu instead of sticking to the sides.

2). The last dropdown menu left with no recolored background is the search bar dropdown menu. I would love to get a code for that one as well.

Once again, thank you for your help, we are almost there!

(never mind, the gap is very persistent)

You can add panel to the menupopup rule.

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}

/*default for panelview*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;
  color: black !important;
}

@cor-el Thanks!

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}

That did the trick to recolor search bar drop down menu. To think about it, the menu itself still looks pretty rough with no rounded edges and settings button taking way too much space for no reason (I think Firefox developers fell in love with their new combined URL/Search bar so much they obviously don't give a damn about the separate dedicated Search bar anymore). But that is a different topic altogether, I think I'll open a new thread for it.

Hi jbrandom2, when you come up with the final working solution for menu coloring, please add your code to this thread for reference by other users, along with a screenshot showing the colors. Note: You can surround your code with

 and 

tags to preserve the formatting. Thanks!

Menu recoloring code I asked for went on to become yet another part of a bigger CSS project, the end goal is a UI reminiscent of good old FF3.5 the way I remember it. The code is intended to work hand in hand with: 1). Office 2010 Aero theme: https://addons.mozilla.org/en-US/firefox/addon/office-2010-aero/ 2). Menu Panel is supposed to be on. 3). Compact Mode is on. Here is the full code:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
  :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top: var(--uc-titlebar-padding,0px);
  right:0;
  height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
  :root{ --uc-titlebar-padding: 0px !important }
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
  -moz-box-ordinal-group: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }





/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public 

License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(21px + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: 21px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f5faff !important;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 21px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
/  order: 99;
/  flex-grow: 1;
/  min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }




/* Tabs Style and Spacing fix */

.tab-background{
border-radius: 5px 5px 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, #7fb0ef 5%, transparent);
  border-top: 1px solid rgba(130, 130, 130, 0.2) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.2) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.2) !important;
}
  .tabbrowser-tab:not([selected]):hover .tab-background {
  background-color: color-mix(in srgb, #000000 12%, transparent) !important;
}

menupopup > menu, menupopup > menuitem{
padding-block: 0px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

#PlacesToolbarItems .bookmark-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;

}

/*default for panels*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  color: black !important;
}

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}

/*** Tab Close buttons ***/
.tabbrowser-tab .tab-close-button {
 margin-top: 4px !important;
}

Here are some screenshots:

Hi I entered your code above and it screwed up the tool bar sizes made the address bar go a little bit above the menu bar it also had blank white spaces under some items like under Edit. Undo and Redo was white like the background so it just looked like a blank space anyway to fix that?

Hi Derek, there is a lot of different code in this thread.

To copy the link to a specific reply identifying the code that isn't working for you, right-click the date/time below the poster's name and Copy Link. Then you can paste that into a reply for reference.

Alternately, you could start a new thread:

https://support.mozilla.org/questions/new/desktop/form

I'll lock this thread so other people stop using for their own questions.