title: Add a hover effect on unoredered list
body: <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>body{
  background: #080808;
  color: #fff;
  }
  #header{
  width: 100%;
  height: 100vh;
  background-image: url();
  background-position: center;
  background-size: cover;
  padding-bottom: 50
  
  
   }
  .container{
  padding: 10px 10% ;
  }
  
  nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  
  }
  
  .logo{
  width: 140px;
  }
  
   nav ul li{
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  }
  
  nav ul li a{
  position: relative;
  text-decoration: none;
  color: #fff;
  }
  
  nav ul li a::after{
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: red;
  
  
  }
  
  nav ul li a:hover::after{
  width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;nav&gt;
              &lt;img src="" class="logo"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#Home"&gt;&lt;/a&gt;Home&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#About"&gt;&lt;/a&gt;About&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#Services"&gt;&lt;/a&gt;Services&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#Portfolio"&gt;&lt;/a&gt;Portfolio&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#Contact"&gt;&lt;/a&gt;Contact&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/nav&gt;
         &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to add a hover effect to the ul li but the code seems not to work.</p>
  <p>I think this is how it should be but the css seems not to work for some reason. Thanks anyways
  I also tried using the opacity tag but it still doesn't work.
  Edit: I have now edit the HTML Code. The problem is that the hover effect doen't appear.
  <strong>What I want</strong> is to make a hover effect for the ul li.</p>