透明的悬停背景

Question

请访问'jsfiddle'Code，其中可以看到输出。当悬停显示菜单文本时，文本字段的背景为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;
}

有人可以指导解决方案吗？

Answer 1

只需添加

 z-index:200 

到.btn，没有改变任何定位fiddle

Answer 2

只需添加位置：相对; 和 z-index：1000;

.btn:hover .btn-name { display: inline; background-color: #e0e0e0 !important; width: 100px; padding: 17px 20px 12px 0; margin: 0 0 1px 0; border-right: 1px groove #f00; position: relative; z-index: 1000; }

Answer 3

<{1>}添加btn:hover .btn-name

中的

.btn：hover .btn-name {

position relative and z-index: 1

}

此处修复：jsfiddle