title: li:hover>a affecting other list items
body: <p>What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?</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>nav {
        width: 100%;
        height: 5rem;
        background: red;
      }
      
      ul {
        margin: 0 auto;
        font-size: 0;
      }
      ul li {
        display: inline-block;
        line-height: 4.8rem;
        position: relative;
      }
      ul li &gt; a {
        text-decoration: none;
        color: #FFF;
        font-family: "Verdana";
        padding: .1rem 1.5rem;
        font-size: 1.3rem;
        display: block;
        overflow: hidden;
        position: relative;
        transition: 300ms all;
        height: 100%;
        margin: 0;
      }
      ul li &gt; a::before, ul li &gt; a::after {
        content: '';
        width: 100%;
        position: absolute;
        left: 0;
        transition: 200ms all;
      }
      ul li &gt; a::before {
        background: #FFF;
        height: .5rem;
        top: 0;
        transform: translateY(-100%);
      }
      ul li &gt; a::after {
        background: #000;
        height: .4rem;
        bottom: 0;
        transform: translateY(100%);
      }
      ul li::before {
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #CCC;
        position: absolute;
        opacity: 0;
      }
      ul li:hover &gt; a {
        padding-top: 0.6rem;
        padding-bottom: 0.1rem;
      }
      ul li:hover &gt; a::before, ul li:hover &gt; a::after {
        transform: translateY(0);
      }
      ul li:hover::before {
        opacity: 0.3;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Link1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Link5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why <code>li:hover &gt; a</code> is affecting all list items?</p>