Menu
Hello coders ?
I have a list to choose language from
I need to add a smooth effect on hover (ul) so that (li) slides slowly, and also a smooth effect on hover language (li) itself
It works fine when I hover the (li) itself, but doesn’t work on (ul) hover
what’s wrong am I doing?
here are the codes:
1- HTML code
<div class=”lang-selector”>
<ul>Hover to Select Language
<li><a href=”#”>English</a></li>
<li><a href=”#”>Francais</a></li>
<li><a href=”#”>Espanol</a></li>
</ul>
</div>
CSS code
ul
{
margin: 0 10px 0 0;
background-color: #ccc;
float: right;
list-style: none;
width: fit-content;
z-index: 1;
padding: 5px;
float: right;
transition: all 0.5s ease-in-out;
}
ul:hover li
{
border-right: 2px solid #999;
padding: 0 5px;
background-color: #000;
color: #fff;
display: inline;
}
li{
text-align: center;
cursor: pointer;
float: left;
display: none;
transition: all 0.5s ease-in-out;
}
ul li:hover
{
background-color: yellow;
color: #000;
}