title: Scroll when hover - react js
body: <p>Currently, I have this menu, What I want to do is whenever we hover on the button with classname   &quot;scroll-button-down&quot; I want to scroll down the menu, but right now only the button is scrolling not all the menu.</p>
  <p>This is my code so far:</p>
  <pre><code> return (
        &lt;div className=&quot;menu-wrapper&quot;&gt;
          &lt;div&gt;
            &lt;a className=&quot;menu-item&quot;&gt;Pizza&lt;/a&gt;
            &lt;a className=&quot;menu-item&quot;&gt;Hamburguers&lt;/a&gt;
            &lt;button&gt;{&quot;⌃&quot;}&lt;/button&gt;  
            &lt;a className=&quot;menu-item&quot;&gt;Guacamole&lt;/a&gt;
            &lt;a className=&quot;menu-item&quot;&gt;Sushi&lt;/a&gt;
            &lt;button className=&quot;scroll-button-down&quot;&gt;{&quot;⌄&quot;}&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
  css
  
    .scroll-button-down:hover {
      animation: moveMenushow 0.6s linear forwards;
    }
  
    @keyframes moveMenushow {
      100% {
        transform: translateY(-40%);
      }
    }
  </code></pre>