0

I want to get three buttons Home News and About when i hover on menu icon,when i use .drop-down:hover .btn-content{ display: block; } i get nothing. This is my 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>

and this is my 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, 56);
    border:  rgb(59, 56, 56); 
}

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



.btn-all{
    background-color: rgb(59, 56, 56);
    color: white;
    border: rgb(59, 56, 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;
}

The result has to be like below when i hover on icon bar; do not care about colors and one ,two and extra rows!

enter image description here

How can i solve this problem?

sep_The_new_elixiR
  • 33
  • 5

1 Answers1

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

Means .btn-content is inside .drop-down which of course does not happen in your code. Try changing your html to have this rule be true, or include these 2 elements in the same parent and change your css rule to be:

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

Read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors here about css selectors.

YTG
  • 956
  • 2
  • 6
  • 19