title: ReactJS dropdown menu not working backdrop-filter
body: <p>I'm trying to add blur backdrop filter to my dropdown menu in react js project.
  But it's not work. It's work with all anothher elements but not working with this.</p>
  <p>I mean I need blur like in header in dropdown menu.
  <a href="https://i.stack.imgur.com/1ZLYl.jpg" rel="nofollow noreferrer">Here image of problem</a></p>
  <p>I really want to bealive somebody help me with this. I try many things but it's not help me</p>
  <p>This react code:</p>
  <pre><code>function Header(){
      return(
          &lt;div&gt;
              &lt;div className=&quot;Header&quot;&gt;
                  &lt;div className=&quot;Header-Container&quot;&gt;
                  &lt;img className=&quot;Logo&quot; src={Logo} /&gt;
                      &lt;div className=&quot;search-cont&quot;&gt;&lt;input type=&quot;search&quot; id=&quot;site-search&quot; name=&quot;q&quot; placeholder=&quot;Поиск...&quot;&gt;&lt;/input&gt;&lt;/div&gt;
                      &lt;NavItem &gt;
                          &lt;DropdownMenu/&gt;
                      &lt;/NavItem&gt;
                  &lt;img id=&quot;Basket&quot; src={Basket}/&gt;
                  &lt;img id=&quot;Profile&quot; src={Profile}/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  function NavItem(props){
      const[open, setOpen] = useState(false);
      return(
          &lt;div className=&quot;Category&quot;&gt;
              &lt;div onClick={() =&gt; setOpen(!open)}&gt;
                  Все категории
                  &lt;img id=&quot;DownArrow&quot; src={DownArrow}/&gt;
              &lt;/div&gt;
  
              {open &amp;&amp; props.children}
          &lt;/div&gt;
  );
  }
  function DropdownMenu(){
      function DropdownItem(props){
          return(
          &lt;div className=&quot;menu-item&quot;&gt;
              {props.children}
          &lt;/div&gt;
          );
      }
      return(
          &lt;div className=&quot;dropdown&quot;&gt;
              &lt;DropdownItem&gt;
                  #Хиты
              &lt;/DropdownItem&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>This SCSS code:</p>
  <pre><code>body{
    .Header {
      .dropdown{
        backdrop-filter: blur(5px) opacity(100%);
        background: #333333a5 0% 0% no-repeat padding-box;
        display: inline-block;
        box-shadow: inset 0px 0px 35px #c8c8c810, 0px 3px 30px #0000004D;
        border: 1px solid #666666a8;
        border-radius: 15px;
        z-index: 10;
        position: absolute;
        top: 0vh;
        padding-top: 40%;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 40%;
        opacity: 1;
        .menu-item{
          height: 2vw;
          width: 12vw;
          margin-bottom: 5%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          transition: all 0.4s ease-in-out;
          text-align: center;
          font: normal normal bold 18px Montserrat;
          letter-spacing: 1.2px;
          color: #FFFFFF;
          opacity: 1;
          cursor: pointer;
        }
        .menu-item:hover {
          background-color: #FFFFFF28;
        }
      }
      }
  </code></pre>