title: css is hover not working on class
body: <p>I'm trying to get a bar to transition in when the li is hovered over however the hover seems to be ignored and nothing happens. If I instead put 'nav ul:hover', it works but the bar pops in under all the li's.</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li class="nav-li"&gt;All Departments&lt;/li&gt;
      &lt;li class="nav-li"&gt;Shop by Room&lt;/li&gt;
      &lt;li class="nav-li"&gt;DIY Projects &amp; Ideas&lt;/li&gt;
      &lt;li class="nav-li"&gt;Home Services&lt;/li&gt;
      &lt;li class="nav-li"&gt;Speacials &amp; Offers&lt;/li&gt;
      &lt;li class="nav-li"&gt;Local Ad&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.nav-li {
  margin-right: 40px;
  display: inline-block;
  padding-bottom: 2em;
  transition: all .5s ease;
  cursor: pointer;
  position: relative;
  }
  
  .nav-li::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  transition: width .5s ease;
  }
  
  .nav-li:hover .nav-li::after {
  background-color: #f96302;
  width: 100%;
  }
  </code></pre>