Анимация подчеркивания на панели навигации при наведении ⇐ CSS

[Anonymous]

Я пытаюсь создать анимацию наведения, в которой при наведении на нее курсора появляется подчеркнутая линия.
что я могу добавить, чтобы добиться этого? Я попробовал готовые, но это не сработало. появилась линия, но не под текстом панели навигации, а под самим веб-сайтом (в нижней части экрана).

Код: Выделить всё

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

Код: Выделить всё

Mob-Mob
[*]




[list]

[img]img/logo.png[/img]

კონტაქტი
[*]ჩვენს შესახებ
[*]ქეისები
[/list]

Подробнее здесь: https://stackoverflow.com/questions/640 ... -animation