Drop-down menu of a menu button (paper menu) that does not overlap with other elements of the iron list

Question

I have a problem using polymer 1.0 paper-menu-button . The adjacent iron-list items are not overlapping in the drop-down menu.

I create an element that displays elements using iron-list , and each element has a drop-down menu of options that can be performed on this particular iron-list element. However, the paper-menu-button paper-menu drop-down paper-menu does not appear on top of neighboring iron-list items, only on top of its own list item.

I tried checking elements in Chrome and playing with CSS settings in z-index and overflow. Can someone help me with my overlay issue?

Here is an excerpt of my local DOM template of my user element (and see below for a screenshot):

UPDATE: jsbin demonstrates the problem:

http://jsbin.com/kuyovuh/1/edit?html,output

UPDATE # 2: Also note that in Chrome 44 on a mobile device (Android), the “Paper-menu-menu” button does not display the drop-down menu in the jsbin example above.

 <div id="projectsVertBoundary" class="layout vertical"> <div id="projectsHorBoundary" class="layout horizontal center-center"> <iron-list items="[[projects]]" indexAs="_id" as="projLI" class="layout flex"> <template> <div> <paper-material id="itemShadow" animated elevation="1"> <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"> <paper-menu-button id="projOptionsBtn" vertical-align="top" horizontal-align="right" class="layout fixed-right"> <paper-icon-button id="projOptionsButtonIcon" icon="menu" class="dropdown-trigger"></paper-icon-button> <paper-menu id="projOptionsSelMenu" class="dropdown-content"> <paper-icon-item id="projEdit"> <iron-icon icon="create"></iron-icon> Edit Project </paper-icon-item> <paper-icon-item id="projCopy"> <iron-icon icon="content-copy"></iron-icon> Copy Project </paper-icon-item> <paper-icon-item id="projDelete"> <iron-icon icon="delete"></iron-icon> Delete Project </paper-icon-item> </paper-menu> </paper-menu-button> <div class="layout flex vertical"> <!-- a bunch of arbitrary list item content --> Project Type:<p>[[projLI.kind]]</p> </div> </div> </paper-material> </div> </template> </iron-list> </div> </div>