li Hover is not working [duplicate] - html

Question

This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 4 years ago.
I want to hover the li but it is not working, I did this before and it worked but I don't know why it is not working now
I set background color for li, I want to when it is hover it change
and another question, I set opacity for footer but it affected li background color too!
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
}
footer {
width: 1350px;
height: 200px;
background-color: dimgray;
border-radius: 10px;
opacity: 0.7;
position: absolute;
}
#li1 {
display: inline-block;
list-style-type: none;
margin: 2px;
padding: 20px;
background-color: aqua;
width: 100px;
font-family: Calibri;
font-weight: 700;
}
#ul1 {
margin-left: 50px;
margin-top: 60px;
position: relative;
}
a {
text-decoration: none;
color: black;
display: block;
font-size: 20px;
text-align: center;
}
li:hover {
background-color: chartreuse;
}
<footer>
<ul id="ul1">
<li id="li1">Home</li>
<li id="li1">Categories</li>
<li id="li1">languages</li>
<li id="li1">Contries</li>
<li id="li1">Cities</li>
<li id="li1">Planets</li>
<li id="li1">Seas</li>
<li id="li1">Deserts</li>
</ul>
</footer>

Answer 1

You cant set same id for multi elements. And im not sure what html do if you set ## as href in tag
Change id attr to class attr in li like this:
Class="li1"
Its hover will work

Answer 2

It's to do with how css is prioritised. You give all your lis the same id - bad idea. Make it a class instead, or (as I have done in the snippet), give them neither a class or id, and style using "#ul1 li".
You'll see in the snippet below the hover works:
body{
background-image: url(background.jpg);
background-repeat: no-repeat;
}
footer{
width: 1350px;
height: 200px;
background-color:dimgray;
border-radius: 10px;
opacity: 0.7;
position: absolute;
}
#ul1 li{
display:inline-block;
list-style-type: none;
margin: 2px;
padding: 20px;
background-color:aqua;
width: 100px;
font-family:Calibri;
font-weight: 700;
}
#ul1{
margin-left: 50px;
margin-top: 60px;
position: relative;
}
a{
text-decoration: none;
color: black;
display: block;
font-size: 20px;
text-align: center;
}
#ul1 li:hover{
background-color:chartreuse;
}
<footer>
<ul id="ul1">
<li>Home</li>
<li>Categories</li>
<li>languages</li>
<li>Contries</li>
<li>Cities</li>
<li>Planets</li>
<li>Seas</li>
<li>Deserts</li>
</ul>
</footer>

Answer 3

Use
li:hover {
background-color: chartreuse !important;
}
To override your
background-color: aqua;