Você pode ver nesta imagem, o menu contendo "oi" em cada linha está aparecendo em elementos do corpo e também sob um botão na tela.

A estrutura do dom parece assim:

O estilo computado do elemento dropdown quando aberto é:

background-color: transparent;
color: #999;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
position: relative;
width: 1425px;

Aqui está um dos itens que aparece "sobre" o estilo computado do menu suspenso:

box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
height: 22px;
line-height: 17px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: visible;
overflow-y: visible;
vertical-align: middle;
width: 74px;
word-spacing: 0px;

Eu não consigo encontrar a magia certa para fazer este trabalho dar certo. Eu tenho jogado a posição na hierarquia dom enquanto dentro da barra de navegação do dropdown div. Eu também tenho jogado com z-index tanto na lista suspensa, no menu suspenso e nos elementos que estão surgindo.

Eu sinto que há algo fundamental que não estou vendo aqui. Alguma ideia?