为什么当我悬停在图标栏上时悬停不起作用？

如何解决为什么当我悬停在图标栏上时悬停不起作用？

当我将鼠标悬停在菜单图标上时，我想获得三个按钮家庭新闻和关于，当我使用 .drop-down:hover .btn-content{ display: block; } 时，我什么也得不到。这是我的 html：

    <div class="flex-cont first-row-100px   ">
         <div class="drop-down "> 
            <div class="bar-dis"> <i class="fa fa-bars fa-4x red-bar" aria-hidden="true"></i></div>

         </div> 
    </div>

    <div class="btn-content">
        <div class="black_lay"><input type="button" value="Home" class="btn1-width1 btn-all"></div>
        <div class="black_lay"><input type="button" value="News" class="btn-all"></div>
        <div class="black_lay"><input type="button" value="About" class="btn-all"></div>
    </div>

这是我的css：

.flex-cont{
    display: flex; 
}

.first-row-100px{
    height: 70px;
    padding-left: 50%;
    background-color: rgb(59,56,56);
}
.bar-dis{
    background-color: rgb(59,56);
    border:  rgb(59,56); 
}

.red-bar{
    
    color: red;
    
}
.drop-down{
    position: relative;
    
}



.btn-all{
    background-color: rgb(59,56);
    color: white;
    border: rgb(59,56);
    padding-bottom: 30px; 
}

.btn-content{
    display: none;
    width: 100%;

}
.black_lay{
    padding-left: 50%;
    background-color: brown;
}

.drop-down:hover .btn-content{
    display: block;
}

当我将鼠标悬停在图标栏上时，结果必须如下所示；不关心颜色和一、二和额外的行！

我该如何解决这个问题？

解决方法

.drop-down:hover .btn-content{ display: block; }

意味着 .btn-content 在 .drop-down 内，这当然不会在您的代码中发生。尝试更改您的 html 以使此规则为真，或将这 2 个元素包含在同一个父项中并将您的 css 规则更改为：

.drop-down:hover ~ .btn-content{ display: block; }

在此处阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 以了解 css 选择器。