Html CSS3弹出框，菜单不隐藏div

我正在尝试弹出一个CSS菜单

我遇到的问题是，当我隐藏扩展div溢出时，由于translate属性，它将无法正常工作。但是，当溢出可见时，可以在下载按钮下方访问菜单，因为许多div溢出了扩展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;
}

.cube{
z指数：102；
位置：相对位置；
宽度：80px；
高度：40px；
背景色：红色；
浮动：左；
利润率：10px；
-webkit转换持续时间：.2s；
-moz转换持续时间：.2s；
-o-过渡持续时间：.2s；
过渡持续时间：.2s；
溢出：隐藏；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
/*Firefox 3.5+*/
-webkit过滤器：灰度（1）；
过滤器：灰色；
}
.cube:悬停{
-webkit转换：规模（1.3）；
-moz变换：比例（1.3）；
-o变换：比例（1.3）；
转换：比例（1.3）；
过滤器：无；
-webkit过滤器：灰度（0）；
}
#钮扣{
宽度：27px；
高度：25px；
背景：#FAFAFA；
位置：相对位置；
-moz边界半径：20px；
-webkit边界半径：10px；
边界半径：10px；
不透明度：0；
宽度：27px；
高度：25px；
边际：0px；
z指数：101；
}
#按钮和：之前{
内容：“；
位置：绝对位置；
底部：100%；
左：122px；
宽度：0；
身高：0；
右边框：10px实心透明；
边框顶部：20px实心透明；
边框底部：20px实心#FAFAFA；
左边框：10px实心透明；
}
#按钮扩展：悬停{
-webkit转换属性：不透明度，页边距顶部；
-moz过渡属性：不透明度、边距顶部；
-o-过渡特性：不透明度，边缘顶部；
过渡属性：不透明度、边距顶部；
-webkit转换持续时间：.5s；
-moz转换持续时间：.5s；
-o-过渡持续时间：.5s；
过渡时间：.5s；
-webkit转换延迟：.5s；
-moz转换延迟：.5s；
-o-过渡延迟：.5s；
转换延迟：.5s；
-webkit转换：转换（-120px，20px）；
-moz变换：平移（-120px，20px）；
-o变换：平移（-120px，20px）；
转换：转换（-120px，20px）；
边缘顶部：15px；
高度：500px；
宽度：400px；
不透明度：0.9；
边界半径：5px；
盒影：2PX2PX6PX#8888888；
光标：指针；
}
#按钮下载{
z指数：100；
位置：绝对位置；
边缘顶部：10px；
左边距：300px；
高度：25px；
宽度：27px；
背景图片：url(http://www.mitchmiles262.com/wp-content/uploads/2012/07/Download-Button-Green.gif);
背景尺寸：封面；
背景重复：无重复；
背景色：#666；
溢出：可见；
}

我还是个新手，饶了我吧。：）

---

这是您可以更好地理解的示例。

添加

显示：无添加到
.cube
，然后添加以下css：

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

希望有帮助。
啊。非常感谢：）@blaster很乐意帮忙！