title: designing hover slider drop down menu in css
body: <p>I am trying to design a simple hover slider, in which if i hover on it, a drop down menu should slide downwards, and the movement i hover the background color of the button should also change.</p>
  
  <p>while designing this i created a normal button gave it some color now when i am trying to hover on it,its not changing its color.I wrapped my slider button and slider contents in slider class, button have class of slidercontact and slider contents are in slidercontent class(which is not shown in the following code).</p>
  
  <p>i expected the color change, but no color was changed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.media {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .background {
    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;
  }
  
  .slider:hover .slidercontact {
    background-color: rgb(277, 0, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="media"&gt;
    &lt;video src="video.mov" autoplay loop muted&gt;&lt;/video&gt;`
  &lt;/div&gt;
  &lt;div class="background"&gt;&lt;/div&gt;
  &lt;div class="contents"&gt;
    &lt;h1&gt;Registration Page&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="slider"&gt;
    &lt;button class="slidercontact"&gt;EmailID&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>