Does not work insert two
in one line.Where is my mistake?
HTML
<body>
<div class="home-logo">
<p><a href="index.html"><img src="Html/assets/img/logotip.png" width="150"></a></p>
</div>
<div class="home-menu">
<ul>
<li><a href="recycle.garbage.html">Переробка відходів</a></li>
<li><a href="pod.garbage.html">Сортування сміття</a></li>
<li><a href="center.per.html">Центри переробки</a></li>
</ul>
</div>
</body>
CSS
body {margin: 0;
padding:0;
font-family:sans-serif;
margin-right:25px;
margin-left: 25px;
margin-top: 20px;
}
.home-menu li{
display: inline-block;
position: relative;
}
.home-menu ul {
list-style: outside none none;
margin: 0;
padding: 0;
text-align: right;
}
ul li {
list-style: none;
font-family:Candara Bold;
font-weight:bold;
}
ul li a {
position: relative;
display: block;
margin: 0 10px;
padding: 5px 10px;
color: #56983e;
font-size: 1.34em;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
overflow: hidden;
}
ul li a::before {
content: '';
position: absolute;
top: calc(50% - 2px);
left: -100%;
width: 100%;
height: 4px;
background: #56983e;
transition: 0.5s;
}
ul li a:hover {
color: #ffffff;
}
ul li a:hover::before {
animation: animate .4s linear forwards;
}
@keyframes animate {
0% {
top: calc(50% - 2px);
left: -100%;
height: 4px;
z-index: 1;
}
50% {
top: calc(50% - 2px);
left: 0;
height: 4px;
z-index: 1;
}
100% {
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
}