CSS3 popup box with menus not hiding divs

Question

I'm trying to make a CSS menu popout

The problem I'm having is, when I make the Expanding div overflow hidden, it will not work properly because of the translate property. But when overflow is visible, the menu is accessible below the download button, because of the many divs overflowing the expanding div.

.cube {
    z-index:102;
    position:relative;
    width:80px;
    height:40px;
    background-color:red;
    float:left;
    margin:10px;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    overflow:hidden;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */
    -webkit-filter: grayscale(1);
    filter: gray;
}
.cube:hover {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    filter: none;
    -webkit-filter: grayscale(0);
}
#buttonExpand {
    width: 27px;
    height: 25px;
    background: #FAFAFA;
    position: relative;
    -moz-border-radius: 20px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0;
    width:27px;
    height:25px;
    margin:0px;
    z-index:101;
}
#buttonExpand:before {
    content:"";
    position: absolute;
    bottom: 100%;
    left: 122px;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-top: 20px solid transparent;
    border-bottom: 20px solid #FAFAFA;
    border-left: 10px solid transparent;
}
#buttonExpand:hover {
    -webkit-transition-property: opacity, margin-top;
    -moz-transition-property: opacity, margin-top;
    -o-transition-property: opacity, margin-top;
    transition-property: opacity, margin-top;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
    -webkit-transform: translate(-120px, 20px);
    -moz-transform: translate(-120px, 20px);
    -o-transform: translate(-120px, 20px);
    transform: translate(-120px, 20px);
    margin-top:15px;
    height:500px;
    width:400px;
    opacity:0.9;
    border-radius:5px;
    box-shadow: 2px 2px 6px #888888;
    cursor:pointer;
}
#buttonDownload {
    z-index:100;
    position:absolute;
    margin-top:10px;
    margin-left:300px;
    height:25px;
    width:27px;
    background-image:url(http://www.mitchmiles262.com/wp-content/uploads/2012/07/Download-Button-Green.gif);
    background-size:cover;
    background-repeat:no-repeat;
    background-color:#666;
    overflow:visible;
}

I'm still a rookie, have mercy on me. :)

heres the jsfiddle so you can understand it better.

Answer 1

Add display: none; to the .cube, and then add the following css:

#buttonExpand:hover .cube{
    display: block;
}

Hope it helped, here's the fiddle.