title: Navbar underline hover animation
body: <p>i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.</p>
  <p>what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).</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>html,
  body {
    margin: 0;
    padding: 0;
    background-color: grey;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    padding: 40px 16px;
    display: table-cell;
    text-align: center;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
  }
  
  li a:hover {
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  
  .hover-nav {
    background-color: tomato;
  }
  
  #logo {
    margin-left: 30px;
    margin-top: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Mob-Mob&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;a href=""&gt;&lt;img src="img/logo.png" alt="" style="width: 139px;" id="logo"&gt;&lt;/a&gt;
        &lt;li style="float: right;" class="hover-nav"&gt;&lt;a href=""&gt;კონტაქტი&lt;/a&gt;&lt;/li&gt;
        &lt;li style="float: right;"&gt;&lt;a href=""&gt;ჩვენს შესახებ&lt;/a&gt;&lt;/li&gt;
        &lt;li style="float: right;"&gt;&lt;a href=""&gt;ქეისები&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>