Странивые стержни не зависят ⇐ Html

[Anonymous]

• Home
• About
• Services
• Portfolio
• Contact

/css
.container{
padding: 10px 10%;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
position: relative;
}
nav ul li a::after{
content: '';
width: 100%;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
nav ul li a:hover::after{
width: 100%;

< /code>
Я делаю эффект падения для страниц для моего веб -сайта портфеля. Все остальное работает, но зависание нет. Я добавил UL и использовал LI, как обычно, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/757 ... t-hovering