Z-indexing that just won't play nice

Question

For the life of me, I can't figure out how to prevent the dropdown menu, seen below, from riding behind the other buttons. I've changed the z-indexes of all the pertinent elements, but nothing seems to work.

I've setup a jsfiddle to demonstrate: http://jsfiddle.net/theoryshaw/44HPM/3/

(4 jsFiddle alerts will popup... please close them)

Any clues would be greatly appreciated.

Answer 1

Change the .dropdown-menu class in the css to:

.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 1px 0 0;
min-width: 160px;
padding: 4px 0;
position: relative;
top: 100%;
z-index: 1000000;
}

This fixes the z-index issue, however you are then stuck with buttons going haywire, but may be this helps you to get closer to the problem :)