I am designing a hover slider which upon hovering should slide down a drop down menu which should be in block display, in style sheet after applying display: block; it still shows in inline only.

while trying to make it in block i applied directly display block to a element then everything printed in block as expected,but when trying to do with class .slidercontent its not working,that is its not displaying in block.

.media {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .background {
      pointer-events:none;
      z-index: 1;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(43, 74, 111, 0.2);
    }

    .contents {
      display: flex;
      justify-content: center;
      z-index: 2;
      font-style: italic;
      font-weight: bold;
      color: rgb(27, 5, 58);
      border: solid 10px rgba(3, 35, 54, 0.6);
      padding: -3%;
    }

    .slidercontact {
      width: 80px;
      font-style: italic;
      font-size: 1.1em;
      color: rgb(7, 18, 58);
      background-color: rgba(122, 134, 173, 0.5);
      border: 3px solid rgb(6, 21, 57);
    }

    .slider {
      display: flex;
      margin-right: 1.9%;
      margin-top: -5%;
      margin-bottom: 1%;
      flex-direction: column;
      align-items: flex-end;
    }

   .slidercontent {
     display: none;
     background-color: rgba(196, 231, 154, 0.9);
     width: 187px;
    }
   .slider:hover .slidercontent{
     display: block;
    }

    .slider:hover .slidercontact {
      background-color: rgb(277, 0, 0);
    }
<div class="media">
<video src="video.mov" autoplay loop
muted></video>`
</div>
<div class="background"></div>
<div class="contents">
 <h1>Registration Page</h1>
</div>
<div class="slider">
<button class="slidercontact">Contact</button>
<div class="slidercontent">
 <a href="#">1</a>
 <a href="#">2</a>
</div>
</div>

expected elements in block, but displaying inline.

2 Answers

1
Andy Hoffman On

The issue is with .background. It is absolutely positioned and on top of everything else on the page in its own stacking context. Because of this, the hover on .slider was not triggering. I removed the class and moved the background-color to body.

Update

To make the links with text 1 and 2 on their own line, you have to set block on the a inside of .slidercontent.

body {
  min-height: 100vh;
  margin: 0;
  background: rgba(43, 74, 111, 0.2);
}

.media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.contents {
  display: flex;
  justify-content: center;
  z-index: 2;
  font-style: italic;
  font-weight: bold;
  color: rgb(27, 5, 58);
  border: solid 10px rgba(3, 35, 54, 0.6);
  padding: -3%;
}

.slidercontact {
  width: 80px;
  font-style: italic;
  font-size: 1.1em;
  color: rgb(7, 18, 58);
  background-color: rgba(122, 134, 173, 0.5);
  border: 3px solid rgb(6, 21, 57);
}

.slider {
  display: flex;
  margin-right: 1.9%;
  margin-top: -5%;
  margin-bottom: 1%;
  flex-direction: column;
  align-items: flex-end;
}

.slidercontent {
  display: none;
  background-color: rgba(196, 231, 154, 0.9);
  width: 187px;
}

.slidercontent a {
  display: block;
}

.slider:hover .slidercontent {
  display: block;
}

.slider:hover .slidercontact {
  background-color: rgb(277, 0, 0);
}
<div class="media">
  <video src="video.mov" autoplay loop muted></video>`
</div>
<div class="contents">
  <h1>Registration Page</h1>
</div>
<div class="slider">
  <button class="slidercontact">EmailID</button>
  <div class="slidercontent">
    <a href="#">1</a>
    <a href="#">2</a>
  </div>
</div>
</div>

1
saurabh On

you want to display the content inside the .slidercontent as a block.

first of all the .background is absolutely positioned which comes on top of the UI and prevent the code to trigger .slider:hover

secondly content inside the .slidercontent is <a> tag which is inline elements.

so need to change your code as :

.background {
 /* add a line in the background class*/
    z-index: -1;
}

/* to make the <a> tag block */
    .slidercontent a {
      display: block;
    }