Does anyone know how to prevent the dropdown from disappearing when hovering on the button? I'm not using JavaScript for this dropdown menu and would appreciate any help. I'm still learning, so please bear with me as I try to resolve this issue.
<nav>
<div class="dropdown">
<a><img class="profile" src="profile.png" href="index.html"/></a>
<button><a href="#" class="home">Nieuws</a></button>
<div class="projects">
<button>Koers<i class="fas fa-chevron-down"></i></button>
<ul>
<li><a href="nieuws.html">Weather App</a></li>
<li><a class="menulink" href="#">Music App</a></li>
<li><a href="#">React App</a></li>
<li><a href="#">Youtube App</a></li>
</ul>
</div>
<div class="products">
<button>Kopen/Verkopen<i class="fas fa-chevron-down"></i></button>
<ul>
<li><a href="#">Cloud Service</a></li>
<li><a href="#">Music Streaming</a></li>
<li><a href="#">Consulting Help</a></li>
</ul>
</div>
<div class="Contact">
<li><a href="contact.html">Contact</a></li>
</div>
</div>
</nav>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: rgb(139, 62, 85);
font-family: "Poppins", sans-serif;
}
a,
button {
font-family: "Poppins", sans-serif;
color:white;
text-decoration: none;
}
.profile {
width: 110px;
height: 110px;
background-color: hotpink;
margin-left: -10px;
}
.header{
background-color: hotpink;
margin-left: -10px;
margin-right: -50px;
margin-top: -10px;
margin-bottom: 150px;
}
.Contact{
list-style:none;
color:white;
text-decoration: none;
}
.dropdown {
width: 60%;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.projects,
.products {
position: relative;
}
.projects ul,
.products ul {
position: absolute;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
width: 200px;
height: 200px;
background: white;
left: 0px;
list-style: none;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.projects li,
.products li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color:white;
}
.projects li:hover,
.products li:hover {
background-color: rgb(197, 173, 181);
}
.projects a,
.products a {
color: black;
text-decoration: none;
}
.dropdown button,
.home {
background: none;
text-decoration: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.projects button:hover + ul ,
.products button:hover + ul{
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.projects button ul{
display: block;
}
i{
margin-left: 10px;
align-items: center;
}
Thanks!