How to make paper-menu-button dropdown transparent in Polymer?

Question

I want to make <paper-menu-button>'s dropdown transparent, but it's not working for me. I'm using this code:

<paper-menu-button>
  <paper-icon-button icon="menu" slot="dropdown-trigger"></paper-icon-button>
  <paper-listbox slot="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-listbox>
</paper-menu-button>

I tried --paper-menu-button-dropdown-background: rgba(255,255,255,.5);, but it's not working.

Answer 1

The <paper-listbox> is opaque by default and on top of the <paper-menu-button>'s dropdown's background, so you'd have to do one of the following:

• Make the listbox's background transparent to see the color underneath (although the clear listbox overlays the button icon, which could make the text difficult to read).

  <dom-module id="x-foo">
    <template>
      <style>
        paper-listbox {
          /* transparent to show bg of paper-menu-button underneath */
          --paper-listbox-background-color: transparent;
        }
  
        paper-menu-button {
          --paper-menu-button-dropdown-background: rgba(0,0,255,.5);
        }
      </style>
  

  demo

• OR set the listbox's background color to the intended color:

  <dom-module id="x-foo">
    <template>
      <style>
        paper-listbox {
          --paper-listbox-background-color: rgba(0,0,255,.5);
        }
      </style>
  

  demo