Change menu background color when active - html

Question

.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
border: 2px solid #202020;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
padding-top: 4px;
padding-bottom: 4px;
top: 50px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover .dropbtn,
.active {
background-color: #191919;
opacity: 25%;
}
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;">
</div>
<div class="language dropdown">
<img src="elements/can.png" alt="">
<div class="dropdown-content" style="display: none;">
<img src="elements/aus.png" alt="new zealand flag">
<img src="elements/can.png" alt="canada flag">
<img src="elements/sou.png" alt="quebec flag">
<img src="elements/ger.png" alt="germany flag">
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="">
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt=""></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus
a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor </p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
let dcontent = document.querySelector(".dropdown-content")
document.querySelector(".dropdown").addEventListener("click", showLan)
function showLan() {
if (dcontent.style.display == "none") {
dcontent.style.display = "block"
document.querySelector(".overlay").style.display = "block"
}
document.querySelector(".overlay").addEventListener("click", function() {
dcontent.style.display = "none"
document.querySelector(".overlay").style.display = "none"
})
}
</script>
I can't manage to change my language menu background color when active, language menu should have a thin border when hover, and when active top language icon should have a lighter grey background, like in picture 3, I tried almost everything and can't make it work, instead of grey background there is this thin border like on hover.

Answer 1

You need to wrap your .dropdown and .dropdown-content on a div container and implement some css stying rules.
Here try to check my demo
.dropdown-container {
position: relative;
z-index: 2;
width: max-content;
}
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 4px;
padding-bottom: 4px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover,
.active {
background-color: #191919;
opacity: 25%;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.display {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>head</title>
</head>
<body>
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;" />
</div>
<div class="dropdown-container">
<div class="language dropdown">
<img src="Sphere.png" alt="" />
</div>
<div class="dropdown-content">
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="" />
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt="" /></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh
vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit
amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio
tincidunt auctor
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
const dcontent = document.querySelector(".dropdown-content");
const overlay = document.querySelector(".overlay");
document.querySelector(".dropdown").addEventListener("click", () => {
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
});
overlay.addEventListener(
"click",
(e) => {
e.stopPropagation();
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
},
false
);
</script>
</body>
</html>
You may also go to codesandbox https://codesandbox.io/s/amazing-thunder-k38kd?file=/index.html