Menus suspensos do Bootstrap aparecendo atrás de outros elementos no IE7

Você está enfrentando um problema em que os menus suspensos do Bootstrap aparecem atrás de outros elementos em seu site no IE7. Para resolver isso, você precisa entender o conceito de contexto de empilhamento em CSS.

Em um contexto de empilhamento, os elementos são posicionados uns em relação aos outros com base em suas propriedades de índice z. No entanto, os elementos fora do contexto de empilhamento atual não interagem com ele. No seu caso, os menus suspensos não aparecem sobre outros elementos porque não estão no mesmo contexto de empilhamento.

Para corrigir isso, você pode adicionar uma propriedade z-index a um elemento pai dos menus suspensos. Isso criará um novo contexto de empilhamento e permitirá que os menus suspensos apareçam sobre outros elementos. No seu código HTML, o .header-top div é um elemento pai adequado para isso:

.header-top {
    z-index: 10000;
    position: relative;
}

Isso garantirá que os menus suspensos tenham um contexto de empilhamento, permitindo que eles apareçam sobre outros elementos na página.