i am not getting the dropdown-menu

Question

Code Below

.drop-content{
  display:none;
}
.one:hover .drop-content{
  display:block;
}

<div class="menu">
  <h1> Drop-down menu</h1>
  <p>this .html file is an example of a drop-menu.</p></div>
  <span class="one">hover over here to see the drop</span>               
  <div class="drop-content">
  <p>hello,there</p>
</div>

I am not getting the drop-menu, I have tried div class to but not getting the results, please help me out

score 0 · Answer 1 · answered Jun 24 '19 at 12:20

       .one:hover .drop-content{
       display:block;}

suggests that .drop-content is a child of .one which it isn't...it's a sibling.

So use a sibling selector

       .one:hover + .drop-content{
       display:block;}

.drop-content{
  display:none;
}
.one:hover + .drop-content{
  display:block;
}

.drop-content{ display:none; } .one:hover .drop-content{ display:block; }
<div class="menu">
  <h1> Drop-down menu</h1>
  <p>this .html file is an example of a drop-menu.</p>
</div>
<span class="one">hover over here to see the drop</span>
<div class="drop-content">
  <p>hello,there</p>
</div>

i am not getting the dropdown-menu

1 Answers1