html - 透明悬停背景

请访问 'jsfiddle' Code ，在那里可以看到输出。 hover显示菜单文字时，文字框背景为transpernt+，降低zindex。我没有为菜单设置任何透明度或 zindex。我已经尝试了所有可能的技术来解决它，但没有成功。

    .control-menu {
    float: left;
    width: 50px;
    background-color: #F0F0F0;
    height: 380px;
    border-right: 1px solid #e0e0e0;
    z-index: 100;
}
.control-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.btn {
    position: relative;
    display: block;
    text-decoration: none;
    background-color: #e0e0e0;
    padding: 15px 20px 10px 20px;
    text-align: center;
    margin: 0 0 1px 0;
    border-right: 1px groove #f00;
    text-shadow: #666666 1px 1px 1px;
}
.btn-name {
    display: none;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px !important;
}
.btn:hover .btn-name {
    display:inline;
    background-color: #e0e0e0;
    width: 100px;
    padding: 17px 20px 12px 0;
    margin: 0 0 1px 0;
    border-right: 1px groove #f00;
}
.btn.active {
    background-color: #F0F0F0;
    border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
    background-color: #F0F0F0;
    border-bottom: 1px solid #f00;
}

Output Image