title: Why hover in flex or grid is not working?
body: <p>I am trying to use flex and grid in a horizontal menu bar and hover is not working. It works fine without grid or flex. I am trying that if it can work with grid or flex.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="hmenu"&gt;
   &lt;ul&gt;
    &lt;li&gt;A&lt;/li&gt;
    &lt;li&gt;B&lt;/li&gt;
    &lt;li&gt;C&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.hmenu{ display: grid; grid-auto-columns: auto; background-color: #015491; margin-top: 5px; }
  .hmenu &gt; ul { display: flex; justify-content: center; align-items: center; }
  .hmenu &gt; ul &gt; li { display: flex; width: auto; height: 100%; background: linear-gradient(-45deg, #788cff, #b4c8ff); border: #A67BC6 solid; padding: 10px; align-items: center; justify-content: center; margin-right: 50px; }
  .hmenu &gt; a { font-size: 15px; line-height: 100%; text-transform: uppercase; text-decoration: none; font-family: sans-serif "Avenir Light"; font-weight: strong 300; color: #FFFFFF; }
  .hmenu a:hover { box-shadow: 0px 16px 22px 2px rgba(51,51,51,0.2); transform: translateY(-20px); background-color: #73b3e7; }
  </code></pre>