Navbar underline hover animation

i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.

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).

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
      <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
      <li style="float: right;"><a href="">ქეისები</a></li>
    </ul>
  </nav>

</body>

</html>

Solution

You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.

Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.

Also avoid using inline styles when possible.

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 {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -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;
  }

  li a:hover {
      background-color: tomato;
      text-decoration: underline;
  }

<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>

If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.

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 {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -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;
    box-sizing: border-box;
    height: 100px;
  }

  li a:hover {
      background-color: tomato;
      border-bottom: 1px solid white;
  }

<nav>
  <ul>
    <li><a href="">კონტაქტი</a></li>
    <li><a href="">ჩვენს შესახებ</a></li>
    <li><a href="">ქეისები</a></li>
  </ul>
</nav>