title: CSS- dropdown menu transparent background when hovering but I want an opaque color from the beginning of animation
body: <p>I'm newbie in CSS and I have set a dropdown menu. When hovering, the dropping menu has a transparent background. How make the background with  an opaque color from the beginning of animation ? I have tried several configurations but none works: so far my dropdown menu has a transparent background when dropping. </p>
  
  <p><strong>Update : okay the hovering now is opaque since the beginning but there is still a lag with the fade-outing of the text. So far the text remain here behing the drop down menu then disappears brutally. Maybe someone have an hint to fix that ?</strong></p>
  
  <p><strong>here my codesandbox : <a href="https://codesandbox.io/s/93kz5pmzp4" rel="nofollow noreferrer">https://codesandbox.io/s/93kz5pmzp4</a></strong> you will see a little lag with transparent color then will come opacity.  I would have the opacity from the beggining. </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-js lang-js prettyprint-override"><code>import React from 'react'
  import style from "./Menu.module.css"; 
  
  export default (props) =&gt; {
    return (
      &lt;div className={style.menu}&gt;
          &lt;div&gt; Current link &lt;/div&gt;
          &lt;div className={style.menu__container}&gt;
            &lt;button className={style.menu__button}&gt;Dropdown&lt;/button&gt;
            &lt;div className={style.menu__content}&gt;
              &lt;Link /* className={style.link} */ to="/portfolio/"&gt;Portfolio {props.portfolio}&lt;/Link&gt;
              &lt;Link to="/blog/"&gt;Blog {props.blog}&lt;/Link&gt;
              &lt;Link to="/prestations/"&gt;Prestations {props.prestations}&lt;/Link&gt;
              &lt;Link to="/aboutus/"&gt;About us {props.aboutus}&lt;/Link&gt;
              &lt;Link to="/contact/"&gt;Contact {props.contact}&lt;/Link&gt; 
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    )
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /* MENU */
  
      .menu{ 
        margin-left: 15%;
        margin-top: -0.5em;
        transition: width 2s;
      }
  
  
      /* The container &lt;div&gt; - needed to position the dropdown content */
      .menu__container{
        position: relative;
        display: inline-block;
      }
  
    /* Dropdown Button */
    .menu__container .menu__button {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }
  
     /* Change the background color of the dropdown button when the dropdown content is shown */
     .menu__container:hover .menu__button {
      background-color: #3e8e41;}
  
  
    /* Dropdown Content (Hidden by Default) */
    .menu__content {
     /*  display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1; */
  
      visibility: hidden; /* hides sub-menu */
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      /* make content 2em higher than container */
      transform: translateY(-2em);
  
      z-index: -1;
      transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
    }
  
      /* Show the dropdown menu on hover */
      .menu__container:hover .menu__content {
        /* display: block; */
        visibility: visible; /* shows sub-menu */
        background-color: white; 
        opacity: 1;
        z-index: 1;
        transform: translateY(0%);
        transition-delay: 0s, 0s, 0.3s; }
  
    /* Links inside the dropdown */
    .menu__content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
  
    /* Change color of dropdown links on hover */
    .menu__content a:hover {background-color: white;}</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any hint would be great,
  Thanks</p>